html

HTML Comments

Comments are explanatory statements. They are used either for adding notes and explanations in the HTML document or to comment the unwanted/unnecessary code. It makes no difference whether it’s a code or explanatory guidelines; the browser will ignore everything that comes within the comment tag.

This post will provide a detailed overview of HTML comments which will assist the readers to understand how to comment single line as well as multiple lines. Furthermore, it will elaborate the key features of using HTML comments.

So, let’s begin this journey by understanding the syntax of HTML comments.

Syntax

In order to create comments, you need to enclose the content within the opening and closing tag i.e. the comments will begin with “<! –” and close with “–>”. The following snippet will show the syntax of the comment tag:

<!-- comment -->

Advantages

Anyone who has some prior knowledge of any programing language can understand how useful comments are. The following features make comments extremely important:

  • Comments provide help in understanding the source code.
  • Developers utilized the HTML comments to define the functionality of any tag.
  • Using HTML comments a developer can hide his source code from the browser to get executed for testing purposes.
  • A developer writes the comments in his source code so that other developers can understand his code easily by reading the comments.
  • A developer adds comments in his code so that if he revisited his code after a long time he can easily interpret his code.

How to Add Single-Line Comment in HTML

For the clarity of concepts, we will explain the idea of comments with the help of below given example:

Example 1

<html>

<head>

<title>HTML</title>

</head>

<body>

<!--This is our main Heading-->

<h1> HTML Comments </h1>

<!-- it’s a basic paragraph -->

<p> Hello world!! </p>

</body>

</html>

What we have done? We created a heading and a paragraph in the HTML document. And in between them we write some comments to explain the tag’s functionality. We will get the following output:

When we run this code both heading, and paragraph appeared on the browser. However, the browser neglected the comments.

Example 2

Now we will consider another example that has a comparatively complex source code and we will see how comments can make it easy to read:

<html>

<head>

<title>HTML</title>

<!-- Style tag (Internal CSS) to set the design properties for paragraph-->

<style>

p{

color: blueviolet;

background-color: antiquewhite;

}

</style>

</head>

<body>

<!--This is our main Heading-->

<h1> HTML Comments </h1>

<!-- This is a paragraph which utilizes the i tag to apply italic style on the paragraph -->

<p> <i> This is a sample paragraph.</i></p>

</body>

</html>

This example created a paragraph and a heading but this time we implemented some style on the paragraph. For better understanding, HTML comments are added before each tag. It will provide the following output:

How to Add Multiple-Line Comment in HTML

Example 3

HTML comments can be used for commenting multiple lines as shown in the following snippet:

<html>

<head>

<title>HTML</title>

<!--

<style>

p{

color: blueviolet;

background-color: antiquewhite;

}

</style>

-->

</head>

<body>

<!--This is our main Heading-->

<h1> HTML Comments </h1>

<!-- This is a paragraph which utilizes the i tag to apply italic style on the paragraph -->

<p> <i> This is a sample paragraph.</i></p>

</body>

</html>

This program commented the entire style tag:

The output proved that the browser completely ignores the commented section.

Professional developers highly recommend comments; the comments are helpful only when you utilize them purposefully. If you add unnecessary comments they will create complexities.

Conclusions

Comments are used either for adding notes and explanations in the HTML document or to comment the unwanted/unnecessary code. To write comments, you need to enclose the content within the opening and closing tag i.e. the comments will start with “<! –” and end with “–>”. This tutorial initially described what HTML comments are, how to create comments and why comments are important in any programming language.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.