Overview

Comments begin with <!-- and end with -->. They can contain almost anything (no nested comments) and can be useful in a variety of cases. When setting up new pages comments can help explain what certain groups of elements are. When modifying existing pages comments can be used to explain why particular decisions or adjustments were made.

Examples

<!-- I'm a comment! -->

They can be either single line or multiline.

<!-- Comments can also be 
    separated on to
    multiple lines -->

The comment tag is special because even though it's similar to other tags, it will ultimately not be rendered by the browser. It is worth noting that comments are still visible to tech savvy visitors who choose to inspect your HTML source.

<!-- Explanation of section -->
<section>
  <h3>Section Title</h3>
  <p>Section Content</p>
  <!-- <p>This won't be rendered</p> -->
</section>

Notes

• Technically the text inside a comment is optional, but let's be real <-- --> isn't very useful...
• Writing great comments requires practice, ideally developers should strive to write comments that explain a descision or highlight a potential pitfall, without going overboard on unncessary details.
• Comments can also be used to help debug issues on your HTML pages. When trying to isolate an issue try commenting out elements one by one to see if removing a particular element resolves the problem.