HTML Comments

Some web developers prefer to use HTML comments to document their code, others don't like it and not used it. What are the real benefits of using HTML comments for a web application in practice? Is it worth to use comments in general?

What is HTML comment?

Comment is a code or text content enclosed in <!-- and --> which are ignored by browsers, i.e. not displayed and not visible by end-users.

<!-- This is a comment -->

Why devs use HTML comments?

• increases code readability
• helps other people understand your code
• for debugging purposes
• denote closing tag

What are the negatives of HTML comments?

• worsens the UX - even not visible, the HTML comments are part of the DOM tree and increase the number of DOM elements. This, in turn, affects the quickness and responsiveness, also leads to slower CSS selectors and DOM manipulation.
• hurts SEO - an extensive use of HTML comments would increase the size of a page in bytes, which affects loading time, which is a ranking factor in SERP. Also, worsens the Text to HTML ratio.
• loss of bandwidth - more bytes leads to more traffic.

Conclusion

In general, it's totally OK to use HTML comments. But I've seen websites with HTML comments denotes closing tags, that results in significant increase of page size up to 30%. So, if you aim to have a quick and responsive web app, and to gain an "A" grade for web performance, as well as to rank better in SERP - I've highly recommend staying away from the extensive use of comments.

• HTML Imports
• HTML Templates
• Optimize CSS Delivery

Tell me your thoughts about HTML comments by leaving a comment below. Sharing this article would be great. Thanks for reading.