How to Write HTML Comments

To write HTML comments put <!--- and ---> at either end of the comment. HTML comments are notes to keep HTML code organized and are ignored by the browser.

One of the most important aspects of documenting software is writing comments on your code. Comments are lines that exist in computer programs that are ignored by interpreters and compilers, and are intended to be read by humans.

Writing comments allows you to make your code more readable and explain what specific parts of a program are doing. For example, if you’re writing a long program, you may use comments to keep track of certain functions or lines of code.

In this tutorial, we are going to explore how to write comments in HTML. We’ll start by looking at why comments are used in programming. Then, we’ll look at the two main types of comments: single-line and multi-line comments.

Why Do Developers Write Comments?

In HTML, comments are ignored by the browser and are removed when code is compiled and minified. So, why do we write comments?

Comments are written for humans to read and assist in making code easier to understand. When you’re working on a project alone, it’s easy to skip over comments because you are the only person reading your code. However, if you are working on a big project that includes complex code, then you may easily lose track of the purpose of your code.

In addition, if you’re working on a team, other people may not understand the code you have written. If this becomes the case, people may have to follow up with you to find out the purpose of specific code or may skip over a line of code without understanding what it means and how it works.

Comments afford a number of benefits to developers. Firstly, as we discussed, comments make your code easier to understand. If you write comments on your code, both you and other people who read your code will find it easier to keep track of what is going on at certain points in the code.

Secondly, comments allow developers to explain their reasoning behind making decisions about a program. This can be helpful both if a program stops working and requires a bug fix, or when a developer needs additional clarity on why a certain approach was used to solve a problem. Comments can also help speed up the development process because it is easier for you to understand your code.

HTML Comment

Comments in HTML documents are enclosed within special arrows and are separate from the rest of the program. Comments are not displayed by the browser. Here is the syntax for a basic HTML comment tag:

<!--- This is a comment --->

When our web page is opened, this code will not appear on our web page. Instead, the code will appear in our source code for us to read.

The above example is a single line comment, which means its text will only appear on one line. This type of comment is useful if your comment will be short. However, if you intend on writing a long comment, you need to use a multi-line comment.

The syntax for multi-line comments is the same as single-line comments, with the only difference being that the comment closes on a new line. Here’s the syntax for a multi-line comment tag:

<!---
This is a multi-line comment
that appears on multiple lines
because it is long.
--->

Using HTML Comments

Now that you know how to write comments in HTML, you may be wondering: when should I add comments to my code? While there are no strict guidelines around when comments should be used—and every developer and team has their own preferences—there are a few points you should keep in mind.

Comments should generally be used:

• To describe the intended outcome of code.
• To explain why code has been written.
• To clarify a complex line or lines of code.

Of course, there are other situations when you may want to add comments on your code, but those are the most common.

In addition, you may also want to use HTML comments to comment HTML tag blocks out. This allows you to keep a line of code within your program but instruct the browser to ignore it when the HTML web page is rendered.

Commenting code out of your program is common during debugging. This is because, during debugging, you need to find the cause of a problem and implement a solution, and it can be helpful to tell a program to ignore code without removing the code completely from your program. Here’s an example of using HTML comments to comment out code:

<div>
<p>This is an example paragraph.</p>
<!---
	<p>This is another example paragraph.</p>
--->
</div>

When our browser renders this code, the second paragraph will be ignored because it is enclosed within comments.

HTML comments, while useful, should only be used when they will add value to the program. It’s not necessary to add comments to explain every function within a program, or to explain topics in significant depth. Here are a few tips you should keep in mind when writing HTML comments:

• Don’t restate existing code. Comments are for explaining your intent or the logic of a program. You should not use comments to state in English what is already written in code.
• Don’t write verbose comments. Developers are often tempted to write long comments to explain complex procedures. However, while long comments are sometimes useful, you should use them sparingly. Instead, if there is a function you need to explain in-depth, you may want to create a documentation entry.
• Don’t explain everything. Comments are used to clarify a program, and having too many can distract from the core code. If something is obvious, a comment is not needed.

Conclusion

Using HTML comments helps make your programs more readable for both yourself and other people who may read your code. Writing comments throughout your code can make it easier for others to understand the intent behind your code.

In this tutorial, we explored the basics of comments and how to create a comment in HTML. We also discussed why comments are useful and analyzed a few best practices for writing effective comments. That said, every developer has their own commenting style, and as you write more comments you’ll find that you adopt your own.

Now you know how to write comments in HTML like an expert!