how to write comments in html source code

If you have done programming in any language, you must realize how important comments are in understanding code. Of course, you need to write good comments and maintain them regularly. When done correctly, it is an invaluable tool in understanding code logic in long running code bases.

HTML or Hyper Text Meta Language is no different. HTML is not a programming language, it is a meta language. But still comments are a valuable tool. It helps you to remember what the heck you were thinking 6 months ago when you wrote the code.

html comment syntax

The syntax in HTML is not that different from many other programming language. It is just uses a different set of character sequence to demarcate the comments from the code. The character sequence is a lot more verbose in HTML in comparison to some other languages.

In HTML, a comment starts with <!– and ends with –>. These are called comment tags. Both single line and multi line comments have the same syntax. Any text that occurs between the <!– and –> is ignore while rendering the page and is called HTML comments.

The comments are visible when viewing the source code. If you are viewing the code using a text editor, or a HTML IDE or even from with in the browser, it is visible. So, you need to be aware that it is quite possible that others may see your comments if they were to check your source code in the browser.

<!-- This is a single line HTML comment on this webpage -->
<!-- 
    This is a multi line HTML comment on this page.
     See, this line is not visible either 
--> 

HTML comments are not visible when the browser renders the webpage. Well, that is the whole point of the comments anyway. You can also use comment tags with in the sentence or within the single line source.

<div>This is line visible and is rendered but <!-- not these words which is an HTML comment --> you can see this </div>

HTML tags do not support any attributes. If you are using any scripting languages with in the HTML source, then it is possible that those languages have different comment tags than the HTML ones.

HTML comment tips

As with any computer language, HTML comment tags have many uses and benefits.

  • Use it to document why you are using a particular tag or code. It is useful when you look or modify the code at a later time. It is also useful to somebody else who might be modifying the code.
  • Use it to track the start and end of tags. Sometimes the content between tags can get very long. There may be several closing tags such /div and you can use comments to annotate them to identify them and the scope of the tag.
  • It can help with debugging. Commenting out chunks of code rather than deleting them (and replace them later) can help you find bugs faster and easier.
  • Maintain the comments regularly. If you modify the code then make sure you update the corresponding comments to keep them up to date. Outdated comments can have the reverse effect: confusing rather than explanatory.