Making Notes in HTML and CSS

A quick post to serve as a reminder of how to annotate your code.

Blog article by James Newcombe. Originally posted 26 February 2010.

Building web pages can be confusing. Working with other people’s code can be even more so. A good habit to get into is to add notes to your work. This could be to break your CSS into logical groups (Header, Image, Copy, Footer) or perhaps to explain exactly what that piece of Javascript actually does.

Why bother?

Adding explanatory notes can save you plenty of time if you ever had to return to the project. And if you’re working in a team, they can save everybody from headaches.

Another common use of this technique is to ‘comment out’ code that might be temporarily redundant. You might be experimenting with something on an existing page and want to retain some of the old code, just‐in‐case. Whatever the reason, wrapping it all within the opening and closing marks mentioned below will mean that the browser ignores it.


Start by writing:


Add your notes:

<!-- Navigation Area 

Then close it:

<!-- Navigation Area -->


This is quite similar, but not the same as HTML.

Start with:


Add your notes:

/* Accordion

Then close it like this:

/* Accordion */