Comments in HTML

Comment is a part of the code which will be ignored by the browser.
Comments mostly used by the programmer to add some information about the code. It is a very good habit to include a comment in code because it will be very useful in future when you look back into code or HTML document and will directly understand why you have added particular code.

Syntax

Comments in html starts with <!-- and ends with -->. Anything in between will be ignored by the browser.
You also can have multiple lines between comments tag.

This page is well commented.


<!DOCTYPE html>
<!-- This is the web page which is for 
    understanding how comment is ignored by the browser and 
    how single line and multiline comment added. -->
<html>
    <!-- Head Starts here -->
    <head>
        <meta name="description" content="Learn meta tags" />
    </head>
    <!-- Head Ends here -->
    <!-- Body Starts here -->
    <body>
        <p>
            This page is well commented.
        </p>
    </body>
    <!-- Body Ends here -->
</html>
                        

As per above example, you can add single line comments or multiline comments between comments tag.

Invalid comments

These are the points to look out when adding comments:

  • Comments cannot be nested. Means, you can not add another comment inside a comment.
  • Inside comment, -- (double dash) should not be included. It only should be part of the ending tag -->.
  • <!-- and --> should not have space.
; --> < -- space in comment tag -- > <-- This comment tag has --. Let us see -->

This page has invalid comments.


<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Learn meta tags" />
    </head>
    <body>
        <!-- This comment is nested 
            <!-- another comment -->
        -->
        < -- space in comment tag -- >
        <-- This comment tag has --. Let us see -->
        <p>
            This page has invalid comments.
        </p>
    </body>
</html>
                        

In above example, you can see that above all comments are invalid. So while adding comments, please keep in mind given points.

Conditional Comments

Conditional comments provide a mechanism to target Internet Explorer browser as a group or individual. It was introduced in IE5 and removed in IE10. So you can use it for the documents rendered in IE5 to IE9.
Most of the times, conditional comments can be added anywhere in the document.
Conditional comments can be used to add content or add CSS file for particular IE ( Internet Explorer ) browser.

Sample

Let us have a look at sample conditional comment.

This page has conditional comment.


<!DOCTYPE html>
<html>
    <head>
        <!--[if IE ]>
            <link href="cssforie.css" rel="stylesheet" type="text/css">
        <![endif]-->
    </head>
    <body>
        <p>
            This page has conditional comment.
        </p>
    </body>
</html>
                        

Above example has shown the basic conditional comment. If the browser is IE, then link the style sheet.. So IE5 to IE9 will add style sheet and other browsers will ignore this.
Conditional comments work all the version of IE5 to IE9 ( from IE10 and above don't support) and other browsers will ignore.

Conditional Comment Operators

There are some operators that can be used in conditional comments and write a complex expression. Let us have a look at the operators first.

Operator Description
IE It represents Internet Explorer. You can specify version also.
i.e. IE 7
gt greater than
gte greater than or equal
lt less than
lte less than or equal
& the AND
| the OR
! the NOT
() for subexpression

Downlevel Hidden Conditional Comments

Let us have a look at examples first.

This page has conditional comment.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            This page has conditional comment.
        </p>
        <!--[if IE 6 ]>
            <p>Only IE6 will see this</p>
        <![endif]-->
        <!--[if lt IE 7 ]>
            <p>Only less than IE7 will see this</p>
        <![endif]-->
        <!--[if gte IE 6 ]>
            <p>Only IE6 and greater version will see this</p>
        <![endif]-->
        <!--[if !IE 6 ]>
            <p>IE6 will not see this</p>
        <![endif]-->
        <!--[if (IE 5) | (IE 7) ]>
            <p>IE5 or IE7 will see this</p>
        <![endif]-->
    </body>
</html>
                        

If you see the above comments, it will only be seen to the IE5 to IE9. Other browsers will consider it standard HTML comment. So it is called Downlevel Hidden Conditional Comments.

Downlevel-revealed Conditional Comments

Let us see the example first.

This page has conditional comment.

Browser that don't support conditional comments will see it. But this is invalid.

Browser that don't support conditional comments will see it. And it is valid.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            This page has conditional comment.
        </p>
        <![if !IE]>
            <p>Browser that don't support conditional comments will see it. But this is invalid.</p>
        <![endif]>
        <!--[if !IE]-->
            <p>Browser that don't support conditional comments will see it. And it is valid.</p>
        <!--[endif]-->
    </body>
</html>
                        

If you see the above example in a browser, you will be able to see it other browsers which don't support conditional comments. If a condition is true, then supporting browser will also show the content. So this is called Downlevel-revealed Conditional Comments.
In the above example, the first condition is invalid HTML. So don't use it. The second example is valid HTML.

In Practice

Most of the times, when you want your web page to support older IE browser, and some styles only needs to be included in older IE browser, you can use conditional comments. We already have seen example.

Conclusion

In this section, we have seen comments and conditional comments.
In next section, you will learn about block elements in HTML.