Learn How to Write HTML Comments
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
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
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.
Read Later
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>
Output:
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.
Example of Inline comments:
<!DOCTYPE html><head> <title>Inline Comment</title></head><body> <p>This is <!—an example of--> Inline Comment</p></body></html>
Output:
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>
Output
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>
Output:
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>
Output:
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:
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.
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
Top Picks & New Arrivals
