Table of Contents

What is HTML Comment?

A comment is a part of code that is generally not printed as output over the browser. A comment is not an important section in your coding if you write a comment into your code it is easy to understand your code to others. When your code is very complex then you can mention the comment to increase the readability of your code. If you want to add comments to your document then you can add comments by using some tags like <! — …. — > Whatever you write in between this tag then it will consider as a comment in HTML. Then this comment will ignore by the browser means the browser will not print the comment as an output.

Example-

				
					<!DOCTYPE html>
<html>
  <head> <!--header starts here-->
    <title>background color</title>
  </head><!--header ends here-->
  <body data-rsssl=1>
    <h1 style="background-color: rgba(94, 243, 243, 0.356)">GEEKY4U.com(learn with passion)</h1>
    <h2 style="background-color: rgb(88, 236, 175)">
      GEEKY4U.com(learn with passion)
    </h2>
    <p style="background-color: rgb(193, 226, 46)">
      GEEKY4U.com(learn with passion)
    </p>
  </body>
</html>

				
			

Output:

html comment

In the above example of background color, Content that is written in the comment section has been ignored by the browser.

What are the different types of HTML comments?

HTML will allow different types of comments to make your code simple. HTML supports single line as well as multiline comments.

Multiline comment-

HTML consists of a single line as well as multiline comments. HTML supports both single-line and multiline comments. Multiline comment means you can add multiple lines in the comment. Multiple comments were written in between <! — …. — > tag.

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>multiline comment </title>
  </head>
  <body data-rsssl=1>
      <!-- This is an example of multiline comment
    You can mention here more than 2 line of comment
    Which is considered as multiline comment -->
    <h1>This is a main content------ </h1>
  </body>
</html>

				
			

Output:

types of comment

Conditional comment-

A conditional comment is also supported by HTML but not supported by all the browser. Only internet explorer will support the concept of conditional comment. Conditional comments consist of some conditions in the form of instructions.

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>conditional comment </title>
  </head>
  <body data-rsssl=1>
      <!--if[IE]>
        main instruction for IE
      <![end if]-->
    <h1>This is a main content------ </h1>
  </body>
</html>

				
			

Output:

types of comment

What is an HTML Comment tag?

Writing comments in the code comment tag is important. You can add important instructions or notifications in the comment section so that your code will look simpler and easy to understand.

Syntax- <! — ….comment here… — >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>comment tag </title>
  </head>
  <body data-rsssl=1>
    <!--you can add comment here--> 
    <h1>My main content here----- </h1>
  </body>
</html>

				
			

Output:

html comment

What is a valid comment?

The comment is considered a valid comment When there is no space between <!—do not give any space after! mark — >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>valid tag </title>
  </head>
  <body data-rsssl=1>
    <!--you can add comment here--> 
    <h1>My main content here----- </h1>
  </body>
</html>

				
			

Output:

html valid comment

What is an invalid comment?

The comment is considered an invalid comment when there is space after (!) exclamatory mark. There is no single space required after (<) open-angle bracket and (!) exclamatory mark otherwise comment will be considered as an invalid comment and the comment will also show in the output.

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>valid tag </title>
  </head>
  <body data-rsssl=1>
    <!--you can add comment here--> 
    <h1>My main content here----- </h1>
  </body>
</html>

				
			

Output:

11.5