Comments in HTML

Back to: HTML Tutorials

Comments in HTML with Examples

In this article, I am going to discuss Comments in HTML with Examples. Please read our previous article where we discussed Lists in HTML with Examples. At the end of this article, you will learn everything about HTML Comments and their types with Examples.

Why Comments in HTML?

Comments are some text or code written in your code to give an explanation about the code, and not visible to the user.  Comments are used in Html to improve the readability of code and provide some extra information about the piece of code. Comments are usually ignored by the browser, so everything we write inside the comment tags will not be rendered on the screen. Comments used in Html are called Html Comments.

It is a good coding practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code.

HTML Comment Syntax

The following syntax is used to add comments in the HTML file. Everything we write inside it is considered a comment and will be ignored by the browser.

<!– This is a Comment –>

Single Line Comment in HTML

The below example describes how to add a single-line comment.

<!– <p>This is a single line comment </p> –>

Multiline Comment in HTML

In Html, we can also add multiline comments, multiple line comments can be useful if we want to add some instructions or long explanations related to code. The following is the Multiline Comment Syntax

<!---  
   This is 
   a
   Multiline
   Comment
--> 

Multiline Comment Example in HTML

<p>Below paragraph is enclosed in multiline comment</p>

<!-- <p>This 
is a
multiline
paragraph </p> -->

<p>Above paragraph is enclosed in multiline comment.</p>

Output:

Example:

<p>Below Image is Hidden</p>

<!-- <img src="https://c4.wallpaperflare.com/wallpaper/530/410/433/buggati-car-car-show-bugatti-chiron-vehicle-hd-wallpaper-preview.jpg">
 →

<p>Above Image is Hidden</p>

Output:

Note: HTML comments are not displayed in the browser, but they can help document your HTML source code.

Hide Content in HTML

Comments can be used to hide a particular element and prevent it from getting displayed on the screen.

<p>Below paragraph is hidden.</p>

<!-- <p>This is hidden paragraph </p> -->

<p>Above paragraph is hidden.</p>

Output:

In the above example, the middle paragraph is ignored by the browser.

Hide Inline Content

Comments can be used to hide content between the element.

<p>This <!-- element--> is a Inline Comment.</p>

Output:

In the above example, the word element is ignored by the browser.

In the next article, I am going to discuss Links in HTML with Examples. Here, in this article, I try to explain Comments in HTML with Examples and I hope you enjoy this HTML Comments with Examples article.