Learn How to Write HTML Comments

Learn How to Write HTML Comments

4 mins read2.2K Views Comment
Updated on Nov 29, 2023 11:32 IST

Have you ever wondered how developers leave notes or disable parts of HTML code without affecting the webpage? This is done using HTML comments. Let us understand more! 

It is an excellent practice to add comments while writing the source code. By adding comments, you can make your programs more readable and understandable for yourself and others. In this blog, we will learn how to add HTML comments. You will understand the importance of writing comments and learn how to add single-line and multi-line comments to HTML documents. Now, let us get started.

Table of Content

Recommended online courses

Best-suited HTML & CSS courses for you

Learn HTML & CSS with these high-rated online courses

Free
5 hours
Free
2 hours
Free
1 hours
– / –
25 days
Free
3 hours
– / –
25 hours
Free
5 hours
Free
4 hours
name
SoloLearnCertificateStar Icon4.5
Free
– / –
7.5 K
4 weeks

What are HTML Comments?

Comments are explanations in the source code of a computer program. They are added to make the program code easier for people to understand. Comments explain the intent behind your code to others and yourself, especially when you check the code after months. Comments do not appear on the front end or browser.

How to Add Comments

In HTML, you can add your comments between <!– … –> tags. The start tag has an exclamation sign (!), but the end tag does not.

The web browser will ignore the comments and will not display them on the front end.

HTML Tags: Essential and Basic Tags for Creating an HTML Document
HTML Tags: Essential and Basic Tags for Creating an HTML Document
HTML tags form the basic structure of any webpage or HTML document. In this blog, we will discuss some essential and basic HTML tags with examples. HTML tags form the...read more
HTML Underline Tag – Understand u Tag with Examples
HTML Underline Tag – Understand u Tag with Examples
This blog explains the u tag to underline text in HTML. You will also understand when to use the underline tag. This blog explains the u tag to underline text...read more
HTML Heading and Paragraph Tags Explained With Examples
HTML Heading and Paragraph Tags Explained With Examples
This tutorial explains how to create headings and paragraphs in HTML documents using heading and paragraph tags.
Creating HTML Links – Tutorial With Examples
Creating HTML Links – Tutorial With Examples
HTML links, created using the tag, enable navigation between web pages. They define the destination using the “href” attribute, making them vital for connecting and organizing content on websites....read more

Types of HTML Comments

In HTML, there are three types of comments

  • Single-line comment
  • Inline comment
  • Multi-lines comment

Now, let us learn about them.

Single-line Comments

A single-line comment spans one line. These comments are short and appear online on one line.

Example of Single-line comment in HTML:


 
<!DOCTYPE html>
<head>
<title>Single-Line Comment</title>
</head>
<body>
<!-- This is a single line HTML comment. -->
<p> This is an example of single-line comment.</p>
</body>
</html>
Copy code

Output:

2022_04_Single-Line-Comments.jpg

Inline Comments

In HTML, we can add comments in the middle of a line of code or sentence. The text which is written inside the <!– –> element will be commented out and the web browser will show the rest of the text.

Understanding HTML Elements With Examples
Understanding HTML Elements With Examples
HTML elements are fundamental components used to structure and define content on web pages, encompassing tags like headings, paragraphs, and links.

Example of Inline comments:


 
<!DOCTYPE html>
<head>
<title>Inline Comment</title>
</head>
<body>
<p>This is <!—an example of--> Inline Comment</p>
</body>
</html>
Copy code

Output:

2022_04_Inline-Comment-in-HTML.jpg

Multi-lines Comments

Multi-line comments are those that span multiple lines. They are similar to the single-line comments, except that multi-line comments close on a new line. Multi-line comments also begin with the start tag <!– and end with the closing tag –>.

Example of Multi-line comment


 
<!DOCTYPE html>
<html>
<head>
<title>Multi-line Comments</title>
</head>
<body>
<!--
This is a multi-line comment. It can
have multiple lines. No matter how many
lines you add, comments will not appear on the web browser.
-->
<p> This is an example of multi-line comment.</p>
</body>
</html>
Copy code

Output

2022_04_Multiline-Comment-in-HTML.jpg

Valid vs Invalid Comments

Below are a few simple rules to create a valid comment in HTML:

  • In HTML, comments do not nest. It means that we cannot put one comment inside another.
  • We must also not include the double-dash sequence (“–“) in a comment unless it is a part of the closing (–>) tag. It means that comments start with “<!–” and end with “–>.” They do not contain “–” anywhere in the comment.
  • We need to ensure that there should not be any spaces in the start-of comment string.

Here is an example of an invalid comment in HTML:


 
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment</title>
</head>
<body>
< !-- This is not a Valid Comment -->
<p>This is an example of an invalid comment</p>
</body>
</html>
Copy code

Output:

2022_04_Invalid-Comment.jpg

Explanation:

This comment is not valid because there is a space between the left angle bracket and the exclamation mark. Since this comment is invalid, the browser will display the comment.

Hide Content using HTML Comments

Comments also allow us to hide content that we do not want to display on a web browser. You can hide everything written between the <!– and the –> from the display.

Here is an example of hiding content:


 
<!DOCTYPE html>
<html>
<head>
<title>Hide Content</title>
</head>
<body>
<p>This is paragraph 1.</p>
<!-- <p>This is paragraph 2 </p> -->
<p>This is paragraph 3.</p>
<!-- <p>This is paragraph 4 </p> -->
</body>
</html>
Copy code

Output:

2022_04_HTML-Comments-to-hide-content.jpg

Conclusion

In this blog, we learned how to insert comments in HTML. We hope this blog will help you add comments to your HTML documents. Adding comments will help you to organize the backend of your web pages so that the reader can understand the code.

Also Read:

Top Features of HTML5 With Examples
Top Features of HTML5 With Examples
HTML5 is the latest version of Hypertext Markup Language, used for structuring content on the web. It introduces new elements, multimedia support, and improved semantics, making it essential for modern...read more
Creating HTML Tables (Tutorial With Examples)
Creating HTML Tables (Tutorial With Examples)
This guide offers an introduction to HTML tables. You will learn how to create tables in HTML to present tabular data. Tables are a great way to present data visually....read more
How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

FAQs

What is a tag in HTML?

HTML tag was used earlier to add comments to an HTML document. Now, modern browsers do not support this tag. The HTML tag deprecated in HTML5.

What are conditional comments in HTML?

Conditional comments are statements that help us hide or provide HTML source code from Internet Explorer. Conditional comments are of two types: downlevel-hidden ( to hide HTML source) and downlevel-revealed (to reveal HTML source code) in Internet Explorer. These comments are only supported by Internet Explorer versions 5 through 9 in HTML source code.

Can I use HTML comments to temporarily disable or

HTML comments can be used to temporarily disable or "comment out" sections of code. By placing the desired code within HTML comment delimiters, it becomes inactive and is not processed by the browser. This can be useful for debugging or testing purposes.

About the Author

This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio