08 - HTML Comments

This concept of HTML is very simple yet useful. We use sticky notes at our office desk or study table to remind us important things which we usually forget. Not exactly, but in some what similar way we use comments in our programs.

Comments remind us the purpose of particular piece of code, what purpose is it serving there?

How to comment using HTML?

We can add comments to our HTML code using the following syntax,

<!-- Add your Comments here -- >

Do not leave out any space between left angular bracket & exclamation ( < and ! )

HTML comments start with <!-- and end with -->.

The text included within the <!-- and -- > is not displayed in the browser .

We can place comments anywhere in the HTML document, but do not place it before DOCTYPE.

Any HTML element enclosed within comment tags is ignored by the browser. Usually, we want our browser to ignore the code when,

· we leave some code unfinished.

· we want to remind ourselves some important information about the coding.

· we want to explain complicated code.

· we want to add details like date of last edit or review etc

· we want to remove some code, but leave it for later use.

· we want to inform anything to other people who are working on the same project .

· we want to hide a piece of code from old browsers.

· we want to find errors , comment out that code & see the output , if the output is displayed then we can identify that the error is in the commented code

Example for Commenting the code:

<html>
 <head>
  <title>How to comment the code?</title>
 </head>
 <body>
  <p>This text is commented but you cannot see the comment</p>
  <!--This tag is used for representing Paragraphs-->
 </body>
</html>

The output of the above program would be:

You cannot see the content enclosed within comment tags, it just provides information to the programmer or developer who is working on the code.

Multi line Comments:

Not only a single line, we can comment multiple lines of code using <!-- and -->, by placing the opening tag before first line & the closing tag after last line.

Example for Commenting Multiple lines:

<html>
 <head>
   <title>How to comment multiple lines of  code?</title>
 </head>
 <body>
   <p>The following lines of code are commented but you cannot see them</p>
   <!--This tag is used for representing Paragraphs <br/>
   We can comment multiple lines of code-->
 </body>
</html>

The output of the above code would be:

 

Conditional Comments:

These are another type of comments which work only in Internet Explorer.

We can use these comments, when we want to write browser specific code (applicable only in Internet Explorer)

The IE browser performs specific tasks based on the condition specified.

The other browsers just treat this code as comments.

If you want to insert conditional comments in your code, you can use the following syntax,

<! - - [if IE [version of IE] ]>

Instructions

<! [endif]-->

All the versions of IE from Internet Explorer 5 onwards support these types of comments.

Attributes and Events:

There are no attributes & events associated with HTML comments.

Difference between HTML 4 & HTML 5:

There is no difference.

Remember,

· Comments are supported in all major browsers

· Always include meaningful & useful information in comments.

· Avoid putting two or more adjacent hyphens inside comments.

Like us on Facebook