HTML Comments | Comment Tags - Example, Types, and Importance

Beginner Tutorial - Comment Tag and Element in HTML - How to comment in HTML

When we learn HTML Basics, we are also taught about HTML Comment. And if you know how to make a webpage from HTML, then it is very important for you to know about HTML Comments.

Do you know what is an HTML Comment - What is an HTML Comment? How to write HTML Comment in HTML Document - How to Define an HTML Comment? 

How many types of HTML comments are there - Different Types of HTML comments? What is the importance of HTML Comments?

If not! So it doesn't matter. In this lesson, we will answer all the questions asked above. To understand HTML Comment easily, we have divided this tutorial into the following parts:

HTML Comments

{tocify} $title={Table of Contents}

1. Introduction to HTML Comment 

A comment is an HTML code that is not read by the browser. And this code is not shown on the webpage. 

This is the content that is written inside the HTML Comment Tag. Only Browsers and Developers can see it. End users cannot see this content.

Using comments in the coding of HTML documents is a professional skill that brings you into the category of a Professional Web Developer. 

Most experienced developers use HTML Comments. That's why we would also recommend you to use it.

A comment is defined by Comment Tag in HTML Document. By the way, Comment Tag has been removed in HTML 5

Nevertheless, some browsers still support the Comment Tag. Internet Explorer is the best example of this.

2. HTML Comment Syntax

A special tag is used for HTML Comments. Whose Syntax is different from the rest of the HTML Tags. HTML Comment Syntax is like this:

HTML Comment Syntax

Above, you can see how Comment Tag's structure differs from the structure of other HTML Tags. There are three parts in the Syntax of a Comment Tag:

1. Opening: The opening of the Comment consists of Less Than Symbol (<), Exclamation Mark (!), and two Dash (—). You can also call it Opening Tag.

2. Closing: Closing has two Dash (—) and a Greater Than Symbol (>). You can also call it a Closing Tag.

3. Comment Text: Whatever is written within the Opening and Closing. It is called Comment Text. This part is not visible to us on the webpage.

When we write these three together, then Comment Tag is created. Which looks something like this:

<!– Comment Text –>{codeBox}

Now you have understood the Syntax of HTML Comment Tags. Let us now know how to write Comment in HTML documents.

3. Writing Comment in HTML Document

Copy the HTML code below and paste it into your notepad. Type this code manually and save the file as htmlcomment.html. And open it.

<!DOCTYPE html>
<html>
<head>
<title>HTML Comment Example</title>
 
</head>
<body>

<p> 

<!– Paragraph Starting. ,

Google LLC is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.

<!– Paragraph Ending. 

</p> 

</body>
</html>{codeBox}

When you see the above code in the browser, you will see some results like this. We have defined a Comment in this code.

OUTPUT:

Google LLC is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.

HTML Comment Example:

Add Comments

With comments, you can specify notifications and reminders in your HTML code:

<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->{codeBox}

Hide Content

Comments can be utilized to hide content.

This can be accommodating if you hide content temporarily:

<p>This is a paragraph.</p>

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

<p>This is a paragraph too.</p>{codeBox}

You can even hide more than one line. Everything between the <!--  and the  --> will be hidden from the presentation.

Example

Hide a section of HTML code:

<p>This is a paragraph.</p>

<!--
<p>Look at this cool image:</p>
<img border="0" src=google_logo.svg" alt="google">
-->

<p>This is a paragraph too.</p>{codeBox}

4. Different types of Comment – Types of HTML Comment

By the way, no type has been told based on the comment. But, for the convenience of understanding the comment, we have given three types of comment:

  1. Single Line Comment
  2. Multi-Line Comment
  3. Conditional Comments

1. Single Line Comment:

When only one line is commented on HTML Document, it is called Single Line Comment. A single Line Comment is defined in this way.

<!– This is a Single Line Comment. -->{codeBox}

2. Multi-Line Comment:

When a comment is made on more than one line in an HTML document, then it is called Multi Line Comment. It is used to simultaneously describe or hide a paragraph or more paragraphs from users. 

Multi-Line Comment is defined in this way.

<!– This is Multi Line Comment.
This Comment Apply More Than One Line.
You Can Apply This To A Whole Paragraph Or Document. -->{codeBox}

3. Conditional Comment:

This type of comment is written for Internet Explorer Browser. Other browsers ignore Conditional Comments.

Conditional Instructions are written for different versions of IE Browser by Conditional Comment.

The conditional comment is written in this way:

<!DOCTYPE html>
<html>
<head>
 
<–[if IE 7]

Certain Instructions Goes Here…

<![endif]–>

</head>
 <body>

</body>
</html>{codeBox}


Suppose you want to use different styles for different versions of IE. Then you can do this work through Conditional Comment.

5. Importance of HTML Comment

1. When any information has to be hidden from the users. Then that particular content can be hidden through comments without deleting it.

2. Different parts of an HTML document can be named by Comment. This makes it easy to understand HTML Code.

3. When you want to share HTML Code with another developer. So through Comment, it can be told about that particular code that you have to do on this code. Thus it does not take time to find the code.

4. HTML Comments are also important for giving Conditional Instructions to a particular browser.

5. HTML documents are very large. In which much code is written. 

That's why while coding, notes are inserted in between through comments so that the work can be started again from the exact place.

What have you learned?

In this Lesson, we have told you the details of HTML Comment. Now you know what HTML Comment is? How is comment defined? You have also known the different types of HTML Comments and the importance of HTML comments. We hope that this Lesson will prove useful for you.

Conclusion:

Friends, according to my expertise, I have written complete information to help you on “Comment Tag and Element in HTML” If this post is favourable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

To be published, comments must be reviewed by the administrator.*

Previous Post Next Post