HTML Comments

HTML comments are notes you leave in your code. They are not shown in the browser. Only people who look at your source code can see them.

Why Use Comments?

Comments help you document your code. You can leave reminders for yourself or notes for other developers who might work on your project later.

Think of comments like sticky notes on your code. They do not change how the page looks. They just help you remember things.

The HTML Comment Tag

Here is how you write a comment in HTML:

<!-- Your comment goes here -->

Notice the exclamation point right after the first less-than sign. That is important. The end tag does not have an exclamation point, just two dashes and a greater-than sign.

Adding Comments to Your Code

You can use comments to leave reminders, explain tricky parts of your code, or mark sections that need work later.

See? The preview only shows the paragraphs. The comments are invisible. But if you right click this page and select “View Page Source”, you will see the comments sitting right there in the code.

Using Comments to Hide Content

Sometimes you want to temporarily remove something from your page without deleting it forever. You can just “comment it out”.

This is very useful when you are testing things or debugging. You can hide a section of code and see how your page looks without it. Then unhide it later by removing the comment markers.

Here is how you hide a single line or element:

The middle paragraph is gone. It is still in the code, but the browser ignores it because it is wrapped in comment tags.

Hiding Multiple Lines

You can also hide several lines at once. Just put <!-- at the start of the block and --> at the end.

All the code between <!-- and --> is completely ignored by the browser. The heading, the paragraph, and the image never show up.

Using Comments for Debugging

Comments are great for finding errors. When something is broken on your page, you can comment out parts of your code one by one until the problem goes away. Then you know the last thing you commented out is probably causing the issue.

This is called debugging. Every developer does it.

Here is an example. Something is wrong but you are not sure what:

By commenting things out, you can test different parts of your page without deleting anything. When you figure out the problem, just remove the comment markers.

Hiding Inline Content

You can even hide just a few words inside a sentence. Wrap the comment around the part you want to hide.

See how the words inside the comments disappear? The sentence still makes sense without them.

Quick Tips for Good Comments

• Keep comments clear and helpful. “Fix this later” is better than nothing, but “TODO: Add mobile menu” is even better.
• Do not over-comment. Commenting every single line is just noise. Comment when something is not obvious.
• Remove old comments that are no longer true. Outdated comments can confuse people.
• Do not put sensitive information in comments. Anyone can read them.

What Just Happened? Let Me Explain

• Comments start with <!-- and end with -->.
• Anything between them is ignored by the browser.
• Use comments to leave notes and reminders for yourself or other developers.
• Use comments to temporarily hide code while testing or debugging.
• You can hide a single line, multiple lines, or even part of a sentence.
• Comments are visible in View Page Source, so do not put passwords or secrets there.

HTML Comment Reference

Here is the syntax we covered in this chapter:

That is really all there is to comments. Simple but very useful.