Comments are an essential part of each programming language. It is used to document code properly. Commenting code is considered a good practice. Browsers don’t process comments and simple ignore them. So, it doesn’t render comments in the browser window.
How to write a comment in HTML
HTML comment starts with <!– and ends with –>. Everything in between is considered as comments. Example –
<!—This text itself is a comment -->
HTML Comment Types
- Single line comment
- Multi line (block comment) comment
- Inline Comment
- Conditional comment
1. How to Write Single Line Comment in HTML:
In single line comment in HTML, only the comment exists in a single line. Example-
<!—This is a single line comment -->
2. How to Write Multi-Line Comment (or block Comment) in HTML
Sometimes, it requires you to write long text in your comments. In that case, you’ll use multi-line comment. It shares the same single line comment syntax. It just starts on one line and ends on another line. Example-
<!—This is an example of multi-line comment.
It spans more than one line.
-->
3. How to Write an Inline Comment in HTML
When you need to add comment in the middle of a sentence, you’ll use Inline comment. Example-
<input type=”text” name=”name” <!—add plceholder here. --> >
4. How to Conditional Comments in HTML
if you want only Internet Explorer version 5 to 9 to runs a specific code, then, you can use conditional comments. Other browsers consider it as a comment and simply ignore it. The condition clearly depicts what the code is for. A common use of the conditional comment is to provide different stylesheets for different versions of Internet Explorer. Example –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[if IE 8]>
<link href="styleIE8.css" rel="stylesheet">
<![endif]-->
</head>
Invalid Comments in HTML
1. You must follow the sequence of the three characters to start the comment. Also, no space is allowed between the characters. So the followings are not valid examples-
<! – It is an invalid comment-->
< !– It is an invalid comment-->
<!- It is an invalid comment-->
2. HTML doesn’t allow nested comments. They will not work as you expect. Example-
<!—Outer comment starts here. <!—Inner comment --> outer comment ends here -->
If you open the file in the browser, it will display – “outer comment ends here –>”. Because, browsers consider the first –> as the end of the comment and it displays the subsequent part.
Keyboard shortcut for HTML comments
There is a keyboard shortcut for HTML comments that you can use most code editors. On Windows and Linux, it is Ctl+/ and on Mac, it is Cmd+/. As it is very easy to use, you’ll want to insert comments frequently.
Don’t in Comments
1. As browsers don’t display comments in the browser, you still shouldn’t add any sensitive data in the comments. Because, others can read the comments from the source code of the browser.
2. Don’t write comments in the <title> tag in HTML head section. It doesn’t work there and doesn’t hide the content.
<title>Page title <!—comment doesn’t work here --> </title>
3. Don’t use comments inside an element tag.HTML doesn’t allow this.
<p <!—Don’t insert comment inside HTML tag like this --> >
How to Use Comments Effectively
1. To mark steps or sections: To understand the code of a complex webpage, it is helpful to mark each section with comments. It also helps you or other developers to edit code in the future. Overall, it increases code readability. Example-
<!—START: User registration section -->
<div>
</div>
2. To mark the end of an element: Due to lots of codes inside an element, sometimes it becomes difficult to find its closing tag. In this case, comment becomes very helpful. Example-
<div name=”contactForm”>
….. …..….. …..….. …..
….. …..….. …..….. …..
….. …..….. …..….. …..
</div> <!—END: contactForm -->
3. For debugging: When there occurs an error in a long script, it becomes difficult to figure it out. In this case, you can deactivate and later activate a block or line of codes to find the bug. You’ll repeat this process until you fix the issue. Example-
<h2>Contact form</h2>
<!-- <form action=””>
<input type=”text” name=”name”>
<input type=”submit” name=”btnSubmit”>
</form> -->
<p>more contents goes here.</p>
4. To facilitate A/B testing: May be you want to change the title to see how it works, then, you can hide the previous one with comment so that you can get it later if you need it. Example-
<!— <h1 style=”color:#eee”>Comments in HTML</h1> -->
<h1 style=”color:#ccc; text-decoration:underline;”>HTML Comments</h1>
5. To assign task to other developers: When you work in a team, you may want to assign task to others. Using comments, you can instruct other developers. Example-
<!— Please adjust the font size in the form-->
<form>
<input type=”text” value=”Your name”>
…… …… …… …… …… ……
…… …… …… …… …… ……
<input type=”button” value=”Submit”>
</form>
6. To add reminders in your HTML code: You can also add your next action reminder with comment. Example-
<p>…….</p>
<!—I’ll add more example here -->
7. To hide content temporarily: Even if you want to hide part of your content temporarily for some reasons, commenting is a great option to accomplish this.