HTML Comments
Comments are text notes written for developers. Browsers completely ignore them. Using comments wisely can dramatically improve code readability and facilitate team collaboration.
Comment Syntax
HTML comments begin with <!-- and end with -->. The content in between can be any text; the browser will not display it on the page:
Example
HTML
<!-- This is a comment, users can't see me -->
<p>This text is visible to users.</p>
<!-- ======= Navigation Section Start ======= -->
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
</nav>
<!-- ======= Navigation Section End ======= -->
📌 Note: Although comment content is not visible on the page, it still appears in the HTML source code — anyone can see your comments by viewing the page source. Never include passwords or sensitive information in comments.
Common Uses of Comments
Comments aren't just for writing notes — they're also very useful during development and debugging:
Example
HTML
<!-- Temporarily comment out a section of code (for debugging) -->
<!--
<p>This code doesn't need to be displayed for now.</p>
<a href="old-page.html">Old Link</a>
-->
<!-- TODO: Need to add user avatar later -->
<!-- @John 2026-06-12: Confirm the copy here before going live -->
💡 Best Practice: Comments should explain why something is written a certain way, not how it's written. Good code should be self-explanatory; comments only supplement context that the code itself cannot express. Also, remember to clean up debugging comments before going live.
❓ FAQ
Q Can users see HTML comments?
A Comments don't appear on the page, but anyone can see them by viewing the page source (right-click → View Page Source). So never put passwords, API keys, or sensitive logic in comments. Comments are for developers, not users. Clean up debugging comments before going live.
Q Can comments be nested?
A No. HTML comments don't support nesting — you can't write a
<!-- --> inside another comment. If you try, the browser treats the first --> as the comment's end, exposing everything after it on the page. If you need to comment out a block that already contains comments, consider using CSS display:none or JavaScript to control visibility.Q What can I put inside comments?
A Comments can contain any text, line breaks, and spaces, but cannot contain
-- (double hyphens) as it may be misinterpreted as the comment's end. Common uses: 1) Section markers (like <!-- Navigation Start -->); 2) TODO markers (like <!-- TODO: Add search feature -->); 3) Temporarily hiding code (for debugging); 4) Author info (like <!-- @John 2026-06-12 -->).📖 Summary
- Comments start with
<!--and end with-->; browsers do not display them - Comments can be used to explain code blocks, temporarily hide code, and add TODO markers
- Sensitive information in comments is visible to everyone — never put passwords there
- Clean up debugging comments before deployment to keep source code tidy
📝 Exercises
- Add comments to your code: Write a simple page with navigation and body content, adding section comment markers before and after each block (e.g.,
<!-- Navigation Start -->). - Comment-based debugging: Copy the code from a previous lesson and use comments to temporarily "hide" a section. Verify that the hidden section is indeed not displayed on the page.