How To Add Comments in HTML

List of content you will read in this article:

Writing comments is a good practice when coding using HTML. So, how to add comments in HTML? When it comes to documenting software adding comments on your code is critical. Comments are not visible on the web page as they are not targeted at the reader.

The browsers disregard any text between the comment tags, hence not displayed on the web. HTML for comments are there to explain a code. The goal behind writing code comments is to make the code readable and explain the code in terms of what the different parts are doing. Users often use comments to monitor code lines. HTML comments come in handy when a community of developers is working on a single project. Their role is mainly to facilitate communication.

Types of HTML Comments

There are four types of HTML comments.

1. Single Line Comments

Users can comment on single lines. Note that the single-line comments begin with special arrows . The compiler then ignores the content between the forward slashes and the end of the line.

An example of a single line comment is when used before the code line is as below:

<! --- code comment---> < Users can comment on single lines>

Here is an example of a comment used at the end of a code line:

< Users can comment on single lines><! --- code comment--->.

2. Multi-Line Comments

Users can also use the HTML comment code on multiple lines. Still, the comments are not displayed. Only the code line will be in the output.

3. HTML Comment tag

You can use the <comment> to add a comment to a code. However, note that this is usually possible with Internet Explorer.

4. Conditional Comments

These comments are used for the execution of specific codes with set conditions. The internet explorer supports conditional comments like the <comment> tag.

Uses of Comments

While there are no specific guidelines for comment usage, different developers have their preferences. Essentially, comments are used to:

Explain the reason a code is written.
To highlight the outcome of a code.
To bring clarity to code lines.

Users should also note that comment usage is not limited to the three situations above. There are more ways they can be used.

Usually, programmers use comments during debugging. They use comments to request a browser to ignore a code without necessarily eliminating it, as they diagnose the cause of a problem and try to troubleshoot.

Only use HTML comments if they create value for a program. Developers don't need to explain every single functionality of codes in the program. They should also be aware of the best practices for adding comments to HTML, like not adding comments to obvious things. Note that over usage of the comments can cause distraction from the primary code.

Users should also not restate the existing code. Remember that comments are used to clarify the logic in the code. Don't use them to state what is already written in the code line. Developers need to avoid long comments if possible. In cases where they feel that long comments would be required to explain complex functionalities, they can opt for documentation entries instead.

While the comments are not rendered on a website, anyone can still access them on the internet if you make the document public. They can help you track and monitor code even after staying for months without working on it. They also support communication with other developers.

Comments have two key benefits, making your code easy to understand and keeping track of different parts of the code.

Reasons to Avoid HTML Comments if You Can

Developers use HTML comments to increase the readability of their code, for debugging, to help other people demystify their code, and to mark closing tags. Apart from the reasons above, here is why you should avoid HTML comments.

1. It can affect the user experience

You may wonder how the HTML comments can affect performance, yet the comments are not rendered on the website.

Note that the comments are still part of the Document Object Model (DOM). This increases the DOM elements, thus affecting the responsiveness of a web page. It can also affect the speed, manifesting in slow manipulation of the DOM and CSS selectors.

2. It can hurt your SEO

Having too many HTML comments can affect your SEO, but not in keyword or content rankings. The comments are ignored by the browsers and not factored in the ranking. However, they can affect your page loading speed.

Having too many comments will increase the size of the document and web pages in bytes. This will affect the page loading time, negatively impacting your ranking. Note that users will exit a page after clicking if it takes more than 3 seconds to load, leading to a high bounce rate. A high bounce rate is a negative sign for websites as it sends the message that the page has not been helpful to the visitors.

Too many comments also hurt the Text to HTML ratio. A good Text to HTML ratio of between 25 to 70 percent should be maintained. The ratio represents the percentage of visible content. Note that search engines give websites with large amounts of visible content high ranking.

3. Bandwidth loss

Large HTML5 comments content leads to a spike in bandwidth usage. Having more bytes can lead to a considerable increase in traffic.

Conclusion

HTML comments, when used the right way and in the right amount, are useful for developers. By using them, you can make your code more understandable. That is to anyone who can open your source code.

If you are working on a project with a team of other developers, the comments can help you stay on the same page and make collaboration easy. The information above provides you with guiding basics on how to add comments in HTML, ranging from what they are, how to use them, when to use them, why developers use them, and when you should avoid them.

Learn more about the best HTML comments practices to make your coding project smooth.

People also read:

Category: Web Hosting Tutorials