Many of us must have heard about HTML comments but have never seen them in web browsers. It's just because of the HTML comment tag. This tutorial explains in detail about HTML comment tag and its usage.

What Does the HTML Tag Suggest?

An HTML tag is a group of characters constituting a formatted command for Web pages that an HTML developer typically uses as a markup language to mark the beginning and end of an HTML element of an HTML document. Not many tags use an opening and closing tag; to cover the content. Primarily, the developer can denote the closing tags having a backslash like this - </tag_name>. But these HTML tags will not be perceptible in the browser. The HTML tag <!-- conveys the commencement of the content's comment and --> denotes the end of that comment. So it is crucial to ensure that the HTML comment does not have <!-- and --> inside it; rather, it should be outside the entire tag.

Definition and Use of HTML Comment Tag

As the name signifies, HTML developers use comment tags to write a comment within the HTML code; it makes the code easier to understand and improves its readability. Thus, HTML comment tags help the developer to insert comments in between <!-- ... --> tags. Also, they can use comments to explain their code to help them understand when they edit their source code for future purposes.

Advantages of HTML Comment Tag

  • HTML comments help coders to understand the flexible ongoing flow of code.
  • Developers can comment on any line of existing code using the comment tag.
  • Later, the commented data can be uncommented or deleted if it becomes unusable.

Purpose of Using HTML Comment Tag

When developers think they need to insert small or medium-sized comments within the code for future purposes, they use HTML comment tags. Since the HTML tags do not include the text on the Web page, it becomes easy and flexible to know the intent of that comment. Code Snippet – To write a comment in the source code:

Example:
<!--Here writing a comment. The comment will not display in the web browser-->

How to Add Single-Line Comment in HTML?

A single-line comment is a one-line comment; Its content is not displayed to any web browser. The comments in HTML do not reveal in the browser while the HTML document runs. In a one-line comment, when an HTML developer needs to define and clarify the intent behind the code written within an HTML document, or when they prefer to add a reminder for themselves, they can do it in the following manner can do:

<!DOCTYPE html>
<html lang="eng">
   <head>
      <meta charset="UTF-8">
      <title>Add Single-Line Comments in HTML</title>
   </head>
   <body>
      <!-- This is a single-line comment. And it will not be visible to any web browser. -->
      <h1>About HTML Comments</h1>
      <h2>Types of HTML Comments</h2>
      <p>Developer can write comments in different methods as required. There are three styles of writing comments.</p>
      <p>This tutorial is going through each and every comment styles to define their specific usages.</p>
      <p>This is an example of single-line comment</p>
   </body>
</html>

How to Comment a Line or Tag in HTML?

HTML developers can use inline comments to hide a particular line displayed in web browsers. Below is an example of writing this type of comment:

<!DOCTYPE html>
<html lang="eng">
   <head>
      <meta charset="UTF-8">
      <title>How to Comment a Line or Tag in HTML?</title>
   </head>
<body>
    <p> This comment is <!--going to be--> an inline comment</p>
</body>
</html>

How to Comment Multiple Lines in HTML?

Finally, developers can add multiple lines as comments to an HTML document by following the methods shown below:

<!DOCTYPE html>
<html lang="eng">
   <head>
      <meta charset="UTF-8">
      <title>How to Comment Multiple Lines in HTML?</title>
   </head>
<body>
    <p> This comment is a multi-line comment</p>
    <!-- This is going to be a multi-line comment.
    It will not get displayed in the web browser since the HTML developer wants to hide this portion of a text operating the comment tag.
    Also, the developer can use this style of comment to explain their code to another individual coder. 
    -->
</body>
</html>