A quick post to serve as a reminder of the technique for making notes in HTML and CSS code.

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 annotate your work. This could be to break your CSS into logical groups (Header, Footer) or perhaps to explain exactly what that script is doing.

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 give useful and time saving pointers to your colleagues.

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.

HTML

Start by writing:

<!--

Add your notes:

<!-- Navigation Area

Then close it:

<!-- Navigation Area -->

CSS

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

Start with:

/*

Add your notes:

/* Accordion

Then close it like this:

/* Accordion */

—
Header Image: Lee Campbell on Unsplash.