HTML Comments: Usage and Best Practices

Comment tags are used to insert comments in the HTML source code.

You can put comments between any tags in your HTML documents. Comments use the following syntax:

<!-- Write your comments here -->

Anything after will not be displayed. It can still be seen in the source code for the document, but it is not shown onscreen.

Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.

With comments you can place notifications and reminders in your HTML:

Example

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html&gt;</span><span class="pln">

   </span><span class="tag">&lt;head&gt;</span><span class="pln">
      </span><span class="tag">&lt;title&gt;</span><span class="pln">comments Example</span><span class="tag">&lt;/title&gt;</span><span class="pln">
   </span><span class="tag">&lt;/head&gt;</span><span class="pln">
	
   </span><span class="tag">&lt;body&gt;</span><span class="pln">
      </span><span class="tag">&lt;h2&gt;</span><span class="pln">Comments Example</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
	  </span><span class="com">&lt;!-- This is a comment --&gt;</span><span class="pln">
      </span><span class="tag">&lt;p&gt;</span><span class="pln">The following word uses an </span><span class="tag">&lt;em&gt;</span><span class="pln">emphasized</span><span class="tag">&lt;/em&gt;</span><span class="pln"> typeface.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
	  
	  </span><span class="com">&lt;!-- Remember to add more information here --&gt;</span><span class="pln">
	  </span><span class="tag">&lt;p&gt;</span><span class="pln">This is a paragraph.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
	  
   </span><span class="tag">&lt;/body&gt;</span><span class="pln">
	
</span><span class="tag">&lt;/html&gt;</span><span class="pln">
</span>

Live Preview

You can even comment out whole sections of code. For example, in the following snippet of code you would not see the content of the <h2< element. You can also see there are comments indicating the section of the document, who added it, and when it was added.

Example

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html&gt;</span><span class="pln">

   </span><span class="tag">&lt;head&gt;</span><span class="pln">
      </span><span class="tag">&lt;title&gt;</span><span class="pln">comments Example</span><span class="tag">&lt;/title&gt;</span><span class="pln">
   </span><span class="tag">&lt;/head&gt;</span><span class="pln">
	
   </span><span class="tag">&lt;body&gt;</span><span class="pln">
      </span><span class="com">&lt;!-- Start of this Section added 04-24-04 by atnyla developer --&gt;</span><span class="pln">
   </span><span class="com">&lt;!-- &lt;h2&gt; Character Entities &lt;/h2&gt; --&gt;</span><span class="pln">
   </span><span class="tag">&lt;p&gt;</span><span class="pln"> </span><span class="tag">&lt;strong&gt;</span><span class="pln"> Character entities </span><span class="tag">&lt;/strong&gt;</span><span class="pln"> can be used to escape special
     characters that the browser might otherwise think have special meaning. </span><span class="tag">&lt;/p&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- End of Footnotes section --&gt;</span><span class="pln">
   </span><span class="tag">&lt;/body&gt;</span><span class="pln">
	
</span><span class="tag">&lt;/html&gt;</span><span class="pln">
</span>

Live Preview

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

Conditional Comments

ou might stumble upon conditional comments in HTML:

Example

<span class="pln">
 
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html&gt;</span><span class="pln">

   </span><span class="tag">&lt;head&gt;</span><span class="pln">
      </span><span class="tag">&lt;title&gt;</span><span class="pln">comments Example</span><span class="tag">&lt;/title&gt;</span><span class="pln">
   </span><span class="tag">&lt;/head&gt;</span><span class="pln">
	
   </span><span class="tag">&lt;body&gt;</span><span class="pln">
      </span><span class="com">&lt;!--[if IE 9]&gt;
    .... some HTML here ....
      &lt;![endif]--&gt;</span><span class="pln">
   </span><span class="tag">&lt;/body&gt;</span><span class="pln">
	
</span><span class="tag">&lt;/html&gt;</span><span class="pln">
</span>

Conditional comments defines some HTML tags to be executed by Internet Explorer only.