background img
Nov 30, 2018
15 Views
0 0

Comments tag in HTML

Written by

The comment is a piece of code that is ignored by any web browser. It is a good practice to add comments

Comments tag in HTML The comment is a piece of code that is ignored by any web browser. It is a good practice to add comments to indicate in your HTML code, especially in complex documents, to indicate any sections of a document and any other notes that look at the code. Comments help you and others understand your code and increase the readability of the code.

HTML comments <!– … –> is placed between the tags. So, any content <!– … –> will be treated as a comment with tags and completely ignored by the browser.

Example

Live Demo

<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
	
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

This will give the following results without displaying the content given as part of the comments –

Valid vs Invalid Comments

Comments do not make nests, which means that a comment can not be put in any other comment. The second double-dash sequence “-” can not appear in any comment except the closing –> tag. You should also ensure that there is no place in the start-up of the comment string.

Example

Here, the comment is a valid comment and will be erased by the browser.

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>
	
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

This will produce the following result –

However, the following line is not a valid comment and will be displayed by the browser. This is because there is a place between the left angle brackets and exclamation mark.

Live Demo

<!DOCTYPE html>
<html>

   <head>  
      <title>Invalid Comment Example</title>
   </head>
	
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

This will produce the following result –

Multiline Comments

So far, we have seen single line comments, but HTML also supports multi-line comments.

You can comment many rows by special beginning tag <!– and ending tag –> is placed before the first line and at the end of the last line as shown in the example below.

Example

Live Demo

<!DOCTYPE html>
<html>

   <head>  
      <title>Multiline Comments</title>
   </head> 
	
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
	
</html>

This will produce the following result –

Conditional Comments

Conditional comments work only on Internet Explorer (IE) on Windows but they are ignored by other browsers. They are supported from the front of Explorer 5, and you can use them to give conditional instructions in different versions of IE.

Example

Live Demo

<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

You will come in a situation where you will need to insert a different style sheet based on different versions of Internet Explorer, in such cases conditional comments will be helpful.

Using Comment Tag

There are a few browsers to comment on a part of the HTML code which supports <comment> tags.

Note – The <comment> tag deprecated in HTML5. Do not use this element for webpage.

Example

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

If you are using IE, then it will produce following result on browser –

But if you are not using IE, then it will produce following result browser –

Commenting Script Code

However, you will learn JavaScript in a separate tutorial with HTML, but here you must note that if you are using a JavaScript or VB script in your HTML code, then keep that script code inside the appropriate HTML comments. It is recommended to be old so the browser can work properly.

Example

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

This will produce the following result –

Commenting Style Sheets

Although you will learn to use style sheets with HTML in a separate tutorial, but here you have to make a note that if you are using Cascading Style Sheet (CSS) in your HTML code, then that style sheet The code is recommended to be inserted. So that old browsers can work properly.

Example

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

This will produce the following result –

Article Categories:
HTML

Leave a Reply

Your email address will not be published. Required fields are marked *


The maximum upload file size: 300 MB.
You can upload: image, audio, video, document, text, other.
Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.