HTML Comment Tag | HTML Tutorial

The HTML comment is a piece of code that adds more flexibility in terms of reading and editing codes.

In this tutorial, we will learn HTML comment tag and how can we use it efficiently to make our code easily readable and customizable.


HTML Comment

  • An HTML comment begins with <!‑‑ and ends with ‑‑>.
  • You can put normal text or a piece of code in between these tags.
  • It is a good practice to add comments into the HTML document.
  • Browsers don’t display HTML comment in front of users. They are only visible in the source code.
  • Comments are for those people who might be looking at the source code.
  • You can use it to explain the existing code or to hide a piece of code temporarily.
  • Multi-line HTML comments are useful explain large sections of code.
  • A smart HTML comment is one of the best way to add value and meaning to the source code.
  • An HTML comment cannot be nested together. That means, you can not put one comment inside of another comment.

HTML Comment Tag

We already know a comment starts with <!‑‑ and ends with ‑‑>.

The text or code goes within this two tags will work as a comment.

Browser will ignore this section of code and run the next part.

<!-- Comment for this paragraph -->
<p>This is a paragraph.</p>

The output shows in a web browser:

This is a paragraph.


Multi-line HTML Comment

You have seen how to add a single line comment in a document. HTML also support multi-line comment as well.

To explain a bigger piece of code may take several lines. This is where multi-line comment comes into play.

This also works to disable a block of code in a HTML document.

To use multi-line comment, all you have to do is include an opening (<!‑‑) and closing (‑‑>) comment tags around the text or the code you want to deactivate.

<p>This is a block comment example</p>
<!--  
A block comment helps when you need to explain a big piece of code or
 comment out large sections of code.
-->
<!--
<h2>This heading is in comment</h2>
<p> This paragraph is in comment</p>
-->

The output shows in a web browser:

This is a block comment example


Conditional HTML Comment

Conditional comment only works in Internet Explorer (IE) on windows. Other browser always ignores this comment.

They are supported from Internet Explorer version 5 up. Conditional comments are used to give instructions for Explorer.

You can add them to give different conditional instructions to different versions of IE.

<!--[if IE 5]>
   Special instructions for IE 5 will go here
<![endif]-->
<!--[if IE 6]>
   Special instructions for IE 6 will go here
<![endif]-->

You may need to apply a different style sheet based on different versions of Internet Explorer, in that situation conditional comments will be helpful.


Benefits of HTML Comment

  • HTML comment helps speed up the development process.
  • Provides clarity about a line of code. You can add necessary explanation using a comment.
  • Code looks very neat and clean if you separate different sections of code using comments.
  • Other people and developers will easily understand your code.
  • Commenting can also help with quick fixes. You can scroll and find out the portion that you want to fix quickly.
  • Commenting can also help you to maintain consistency within your code.

Time to practice

OUTPUT

Learn more about HTML formatting tags, our tutorial – HTML Formatting