Skip to Content

Improving Code Readability: Comments in HTML

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 article will show you some advantages including code readability, different use cases, and best practices of HTML comments.

Usage

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

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.

Last Updated: April 11, 2022
Created: January 16, 2022

Comments

There are no comments yet. Start the conversation!

Leave a Comment

Comment Etiquette: Wrap code in a <code> and </code>. Please keep comments on-topic, do not post spam, keep the conversation constructive, and be nice to each other.