HTML Comments
Leave notes in your code that the browser ignores — for yourself, your team, and your future self.
What you will learn
- Write HTML comments
- Use comments to explain and to temporarily disable code
Notes the browser ignores
A comment is a note in your code. The browser does not display it. Comments start with <!-- and end with -->.
<!-- This is the page header -->
<h1>Welcome</h1>
<!-- TODO: add the logo image here later -->
<p>Some content.</p>The two <!-- ... --> lines are notes for the developer. On the actual page you only see the <h1> heading and the <p> paragraph — the comments are completely invisible to visitors. A handy use is a “TODO” reminder to yourself, like the one above.
Note: Output: Welcome (heading) Some content. The two comment lines show nothing at all on the page.
Temporarily switch off code
Wrap any code in a comment to “hide” it without deleting it — handy while testing.
<p>This shows.</p>
<!-- <p>This is commented out, so it is hidden.</p> -->The second paragraph still exists in your file, but because it is wrapped in <!-- and --> the browser skips it entirely. This is called “commenting out” code — a quick way to hide something while testing without deleting it. Remove the comment markers and it comes back.
Note: Output: This shows. (The second paragraph is hidden because it is commented out.)
Tip: Use comments to label big sections of a page (header, main, footer). On large pages this makes your HTML much easier to navigate.
Watch out: Comments are visible to anyone who views your page source — never write passwords, secrets or rude notes in them!
Q. How do you write an HTML comment?
✍️ Practice
- Add comments labelling the header, main content and footer areas of a page.
- Comment out one paragraph and confirm it disappears from the page.
🏠 Homework
- Open an old file of yours and add helpful comments explaining what each section does.