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:
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:
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.
📖 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.