Categories
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
- 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.
Tell me your thoughts about HTML comments by leaving a comment below. Sharing this article would be great. Thanks for reading.
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed