HTML Comments

HTML comments are used to add explanatory notes or to temporarily hide content in your HTML code. Comments are not displayed in the browser, but they can be seen by anyone who views the page source.

Comment Syntax

HTML comments start with <!-- and end with -->. Everything between these markers is treated as a comment.

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- This is another comment -->

Multiline Comments

Comments can span multiple lines:

<!--
  This is a multiline comment.
  It can span across several lines.
  Very useful for detailed explanations.
-->
<p>Regular HTML content here.</p>

Commenting Out Elements

You can comment out HTML elements to temporarily disable them:

<!-- <p>This paragraph is commented out and won't display.</p> -->
<p>This paragraph will display normally.</p>

<!-- 
<div>
  <h2>This entire section is commented out</h2>
  <p>Including multiple elements</p>
</div>
-->

Conditional Comments

Conditional comments were used for Internet Explorer, but they are deprecated in HTML5. Here's how they worked:

<!--[if IE 8]>
  <script src="ie8-specific.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <p>You are using an older version of Internet Explorer</p>
<![endif]-->

Commenting Best Practices

When to Use Comments

When NOT to Use Comments

Comment Examples

Documenting Sections

<!-- ==========================================
     HEADER SECTION
     ========================================== -->
<header>
  <!-- Navigation menu with main links -->
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- ==========================================
     MAIN CONTENT
     ========================================== -->
<main>
  <!-- Hero section with call-to-action -->
  <section class="hero">
    <h1>Welcome to Our Website</h1>
    <p>Discover amazing features</p>
  </section>
</main>

TODO Comments

<!-- TODO: Add responsive navigation for mobile -->
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
  </ul>
</nav>

<!-- FIXME: This layout breaks on small screens -->
<div class="problematic-layout">
  <p>Content that needs fixing</p>
</div>

<!-- NOTE: Using temporary placeholder image -->
<img src="placeholder.jpg" alt="Temporary image">

Performance Considerations

While comments don't affect rendering performance significantly, they do:

For production websites, consider using build tools that can remove comments from HTML files to optimize performance.