Making notes in HTML and CSS

screen of html code

Code detail

Building web pages can be confusing. Working with other people’s code can be doubly 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 complicated-looking piece of Javascript actually does.

Why bother?

Adding notes will 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.

HTML

Start by writing:

Add your notes:

Then close it:

Your notes will look like this:

CSS

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

Start with:

Add your notes:

Then close it like this:

Your notes will appear as:

Remember

Anything typed within the opening and closing marks will only be visible in the source code of your documents. Keep notes outside of blocks of code – do not place them within CSS rules, or inside HTML tags as you’ll most likely break them.