Online Certificate Courses

What are Comments?

A comment is a particular piece of code that isn't displayed by any web browser. It is often an excellent practice to place comments in your HTML document code, especially when handling complex HTML documents, mostly to indicate the various sections of an HTML document, and also any other information about the code for anyone looking at the code. Comments also help yourself, and other people understand your code quickly and increase your code readability.

HTML comments are kept in between the <!-- ... --> tags. Therefore, any piece of code or note placed within the <!-- ... -->  tags will be automatically treated as a comment and will be completely ignored and not displayed by the browser.

Example

<!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>

The above code will be displayed as:

If you have noticed in the code we placed the certain text in between the comment tag and when you check the output, it doesn't get displayed in the document. The browser did not display it because it read it as a comment so it ignored it when it was displaying the rest of the content.

Types and styles of HTML Comments

There are various types and styles of HTML comments available; they include:

1. Multiline Comments

2. Conditional Comments

3. Using Comment tag

4. Commenting Script Code

5. Commenting Style Sheets

Valid and Invalid Comments

Comments do not nest, this literally means that a comment cannot be placed inside another comment. Secondly the double-dash "--" don't have to appear inside a comment except it is a part of the closing --> tag. You have to also make sure that no spaces are in the start of comment string.

Example

<!DOCTYPE html>
<html>

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

 The above code will be displayed as

Although, the following line isn't a valid comment and therefore it will be displayed by the browser. Due to the fact that there is no space between the exclamation mark and the left angle bracket.

<html>

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

The above code will be displayed as:

Multiline Comments

Until now we have talked about single line comment, but HTML supports writing multi-line comments too.

You can actually comment multiple lines by using the special start tag <!-- and end tag --> kept before the first line and end of the last line, An example is shown below.

Example

<!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>

 The above code will be displayed as:


90% Scholarship Offer!!

The Scholarship offer is a discount program to take our Course Programs and Certification valued at $70 USD for a reduced fee of $7 USD. - Offer Closes Soon!!

Copyrights © 2021. SIIT - Scholars International Institute of Technology is a subsidiary of Scholars Global Tech. All Rights Reserved.