logo

HTML Comments

Why Comments?

Comments play an important role in HTML, CSS and other programming languages. These comments help developers to remember the purpose of a program written in the respective language.

Comments are not a part of a language and they provide the information why this code has been written, especially in complex coding. Comments are not parsed i.e. it means they are not visible on a web page.

1. Comments in HTML

We have two types of comments i.e. single-line comments and multi-line comments in every language. And HTML has same syntax of comment in both cases.

Single-line comment

<!-- here single line comment text is written -->

Always remember that we add an exclamation mark (!) at the start after less than sign (<) and not at the end of the comment. We write text between the dashes.

Example

<!DOCTYPE html>
<html>
<body>
<div> <!--- outermost block that contains three blocks of content------>

 <div> <!--- This block is on the left side---->
 <p> This is a block of content. comment is on the right side and tells about the width and alignment of div element. </p>
 </div>
 
 <div><!--- This block is in the middle --->
 <p> This is a second block of content. And comment describes the information about the block.</p>
 </div>
 
 <div><!--- This block is on the right side---->
 <p> comment is describing about the width and alignment of div element. </p>
 </div>
</div>
  
</body>
</html>
Try </>

We can see these comments by inspecting a website. If you want to know about the structure of any website, then press right click of the mouse or ctrl+u. And then select the 'view page source' option.

Multi-line comment

The syntax of multiline comment is the same as single line comment but it can be extended to more than one lines. We use multi-line comment when we test the different behaviors of elements at the same time.

<-- Here the comment description is present
-->

Example

<!DOCTYPE html>
<html>
<body>
 <p style="color:blue; background-color:yellow;"> This is a paragraph. And a comment may be present on more than one line. </p>
 <!--- <p style="color:yellow; background-color:blue;"> 
 This is a paragraph. And a comment may be present on more than one line. </p>
 --->
</body>
</html>
Try </>

As it can be seen the comment has been extended to more than one lines.

2. Comments in CSS

comments may also be used in a CSS stylesheet or within a style tag. There are two ways to represent comments in CSS or <style> tag.

Single-line comment

The single-line comment starts with double forward slashes. single-line comment ends at the end of the line.

// single line comment in css

Example

<!DOCTYPE html>
<html>
<head>
<style>
.block{
	width:500px;
	height:500px;
	background-color: lightblue;
	color:red;
}
// Here the comment is present and the block is being designed 
</style>
</head>
<body>
 <div class="block"> You can see the comment in style tag. </div>

</body>
</html>
Try </>

Multi-line comment

The multi-line comment starts with a forward slash followed by an asterisk(/*), then description is written. And it ends with an asterisk followed by a forward slash (*/).

/* muti line
comment */

Example

<!DOCTYPE html>
<html>
<head>
<style>
.block{
	width:400px;
	height:400px;
	background-color: lightpink;

}
/* It is multiline comment and 
may be on more than one line.*/ 
</style>
</head>
<body>
 <div class="block"> You can see the comment in style tag that starts with /* and ends with */. </div>
</body>
</html>
Try </>

Was this article helpful?