HTML Comments

When you want to include additional details into your HTML, or prevent certain content from being rendered by the browser, the comment tag is the solution.

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

HTML
<!-- 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.

Published: Aug 1st, 2019

Updated: Sep 1st, 2019