Understanding HTML Comments (<!-- -->)

When writing HTML code, it's often helpful to include notes, explanations, or temporary code that you don't want the browser to display. This is where HTML comments come in.

HTML comments allow you to leave messages or disable parts of your code without affecting how the page renders in the browser.

Basic Syntax of an HTML Comment

<!-- This is a comment -->

Everything between <!-- and --> is treated as a comment and ignored by the browser.

✅ Example: Adding a Comment

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>

    <!-- This is a welcome message -->
    <h1>Welcome to My Website</h1>

    <!-- TODO: Add navigation links here later -->

</body>
</html>

In this example, the comments will not be displayed on the web page but can be seen in the HTML source code.

Why Use HTML Comments?

Purpose Example
Leave Notes for yourself or teammates <!-- Add contact form here later -->
Explain Code logic <!-- This section is for promotional content -->
Disable Code Temporarily Comment out elements you want to hide for now
Debug HTML Remove a part of the code without deleting it

Commenting Out Code

You can use comments to temporarily disable parts of your HTML.

<!-- <p>This paragraph is temporarily hidden.</p> -->

The browser will not display this paragraph, but it remains in your code.

Things to Remember

  • Do not nest comments. This is invalid and can break your code.
    • <!-- This is <!-- not valid --> -->
  • Avoid sensitive info in comments. Comments are visible in the browser's source view.
  • Don't use comments for large blocks of hidden content. It affects performance and is not a best practice for hiding content.

Viewing Comments in the Browser

While comments don't show on the page, users can see them by:

  • Right-clicking the page → View Page Source
  • Using browser developer tools (F12)

Best Practices

  • ✅ Keep comments short and relevant.
  • ✅ Use them to explain "why", not "what"—the code already shows "what".
  • ❌ Don't leave too many old or unused blocks commented out.
  • ✅ Remove unnecessary comments in production code for cleanliness.

Bonus: Use Comments for Development Checklists

<!--
TODO:
- Add footer
- Fix mobile responsiveness
- Update images
-->

This helps you or your team stay organized during development.

Conclusion

HTML comments are a simple yet powerful tool for organizing and maintaining clean code. Whether you're leaving reminders for yourself, collaborating with a team, or temporarily disabling code, comments help make your HTML more understandable and manageable. While they don't affect what users see, they play a vital role in development, especially in larger projects.

Just remember to use them wisely—keep them concise, avoid revealing sensitive information, and clean up unnecessary comments before deploying your site.

By mastering how and when to use comments, you'll write cleaner, more maintainable HTML that's easier to debug and collaborate on.

Next Article ❯