HTML Comments – Types and Examples

Comments are used to add other related additional information in an HTML document. HTML Comments are displayed only when the source code of a web-page is opened and are not rendered by the browsers on to the web-pages. They are of utmost importance to developers, as they help them to know what actually a piece of code is doing.

Suppose there is a community of developers working on the same project. In this scenario, the work done by one developer needs to be understood by the others. This is actually where the role of comments come into play in order to facilitate communication.

Html Comments

Keeping you updated with latest technology trends, Join DataFlair on Telegram

Importance of HTML Comments

  • Improves the readability of the code, especially when a single HTML document is accessed by multiple developers.
  • Ensures quick and efficient understanding of complex codes.
  • Makes debugging of source code easier and ensures easier maintainability.

In this article, we’ll look at commenting single lines, multiple lines, and use of comment tags.

Syntax:
HTML comments start with <!– and end with –>. For example:

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body>
<!--following is a paragraph-->
<p><i>Welcome to DataFlair!</i></p>
<p><bdo dir="rtl">Welcome to DataFlair</bdo></p>
</html>

Output:

Comments in HTML

Note- There is an exclamation mark in the opening tag and the ending tag is devoid of it. If there is any space between any of these symbols, it will be an invalid comment in HTML.

Types of  HTML Comments

1. Single line Comments in HTML

A single line can be commented. Refer to the example above.

2. Multi-line Comments in HTML

Multiple lines can be commented using comments. For example,

Code:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <style>
    p{
    border:1px solid #4a7d49;
    }
     </style>
</head>
 <body>
<!--Comments can be used to
add multiple line
on to the HTML Document.-->
<!--following is a paragraph-->
<p>Welcome to DataFlair</p>
</html>

Output:

HTML Comments tag

As we can see, multiple lines are not displayed.

3. <comment> tag in HTML

The <comment> tag can also be used to add comments but it is supported by Internet Explorer solely. For example,

Code:

<!DOCTYPE html> 
<html>   
<head> 
    <title> 
     DataFlair 
    </title> 
</head>    
<body> 
    <p> 
        This is <comment>not</comment> 
        Internet Explorer. 
    </p> 
</body> 
      
</html> 

Output on google chrome:

html comment tag

Output on Internet Explorer:

html comments tag

4. Conditional Comments in HTML

As seen from the name, conditional comments are used to execute a particular code(containing HTML tags) only if a certain condition is met. Conditional Comments are supported only by Internet Explorer, version 5 to version 9.

Code:

<!DOCTYPE html>
<html>
  <body>
    <!--[if IE 9]>
    			<h1>DataFlair</h1>
      <p>E-Learning</p>	
    <![endif]-->
  </body>
</html>

Summary

In this article, we’ve discussed commenting in an HTML Document. There are three types of HTML comments – single line, multi-line, and the using <comment> tag. However, the use of the <comment> tag has been deprecated in HTML 5. We can also comment pieces of code of JavaScript and CSS styles using these comments.

Leave a Reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.