HTML comments tags

HTML comments tags
Nikhil
Published on 2021-07-01 11:20:39

HTML Comments overview and example script

Similar to another programming, markup, and markdown languages, comments in HTML provide other developers with development specific information without affecting the user interface. Unlike other languages, however, HTML comments can be used to specify HTML elements for Internet Explorer only. This topic explains how to write HTML comments and their functional applications.

A comment is a piece of code that is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increase code readability. HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in <!-- ... --> tags will be treated as comments and will be completely ignored by the browser.

Comments example

<!DOCTYPE html>
<html>

<head>
    <!-- Document Header Starts -->
    <title>This is document title</title>
</head> <!-- Document Header Ends -->

<body>
    <p>Document content goes here.....</p>
</body>

</html>

 

Valid vs Invalid Comments


Comments do not nest which means a comment cannot be put inside another comment. Second the double-dash sequence "--" may not appear inside a comment except as part of the closing --> tag. You must also make sure that there are no spaces in the start-of comment string.

Example

Here, the given comment is a valid comment and will be wiped off by the browser.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub Valid Comment Example</title>
</head>

<body>
    <!-- This is valid comment -->
    <p>Document content goes here.....</p>
</body>

</html>

 

But, the following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub Invalid Comment Example</title>
</head>

<body>
    < !-- This is not a valid comment -->
        <p>Document content goes here.....</p>
</body>

</html>

 

Multiline Comments


So far we have seen single-line comments, but HTML supports multi-line comments as well. You can comment multiple lines by the special beginning tag <!-- and ending tag --> placed before the first line and end of the last line as shown in the given example below.

Multiple comments example:

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub Multiline Comments</title>
</head>

<body>
    <!--
Atutorialhub -This is a multiline comment and it can
span through as many as lines you like.

-->
    <p>Document content goes here.....</p>
</body>

</html>

 

Conditional Comments


Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored by other browsers. They are supported from Explorer 5 onwards, and you can use them to give conditional instructions to different versions of IE.

Condition comments example :

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub Conditional Comments</title>
    <!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>

<body>
    <p>Document content goes here.....</p>
</body>

</html>

 

Using Comment Tag


There are few browsers that support <comment> tag to comment a part of HTML code.

Comment tag example :

<!DOCTYPE html>
<html>

<head>
    <title>Using Comment Tag</title>

</head>

<body>
    <p>This is <comment>not</comment> Internet Explorer.</p>
</body>

</html>

 

Commenting Script Code


Though you will learn JavaScript with HTML, in a separate tutorial, here you must make a note that if you are using JavaScript or VB Script in your HTML code then it is recommended to put that script code inside proper HTML comments so that the old browser can work properly.

Commenting script code

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub Commenting Script Code</title>
    <script>
        <!--
        document.write("Hello Atutorialhub !")
        //
        -->
    </script>
</head>

<body>
    <p>Hello , Atutorialhub!</p>
</body>

</html>

 

Commenting Style Sheets


Though you will learn to use style sheets with HTML in a separate tutorial, here you must make a note that if you are using Cascading Style Sheet (CSS) in your HTML code then it is recommended to put that style sheet code inside proper HTML comments so that old browser can work properly.

Commenting style sheet example :

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub Commenting Style Sheets</title>
    <style>
        <!--
        .example {
            border: 1px solid #4a7d49;
        }

        //
        -->
    </style>
</head>

<body>
    <div class="example">Hello , Atutorialhub !</div>
</body>

</html>

 

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website