HTML Comments: Improving Code Readability

HTML comments are necessary to help document snippets of code and keep sections of your web page organized. They can also be used in blocks to omit output on a web page. And, although they can be used to comment out chunks of code, you can still view them in the Page Source section of your browser.

This tutorial will show you some advantages including code readability, different use cases, and best practices of HTML comments.

How to Comment in HTML

In its basic form, an comment in HTML starts with . Here is an example of a single line comment:

<!-- This is a comment -->

You can also create multi-line comments:

<!--
This is a comment.
This is the second line of the comment.
-->

Hide Content

You can hide blocks of content using HTML comments like this:

<p>This is the first paragraph.</p>

<!-- <p>This is the second paragraph.</p> -->

<p>This is the third paragraph.</p>

And your output would become this:

This is the first paragraph.
This is the third paragraph.

Hide Inline Content

You can also add an inline comment to hide parts in the middle of an HTML element:

<p>This is a <!-- simple --> paragraph.</p>

Where the output is:

This is a paragraph.

Conclusion

This tutorial showed you how to comment in HTML.  Comments are very basic and easy to use, but very advantageous when organizing your code.  Code readability is important and something you should strive to accomplish in all the applications you create.