HTML – Comments


What is HTML comment ?

HTML comments are the only meaningful way to deliver message inside the code.

HTML comments is the useful notation to explain what the program does.

HTML comments explains the code flow and makes the program more readable for the programmers.

HTML code written inside the comments are not processed in the HTML document.

HTML code written inside the comments are not displayed or executed in the webpage.

What are the advantages of HTML comments ?

HTML comments are used to add information about the code, warnings or suggestions so that the programmer can easily understand the code.

HTML comments can also be used to prevent some code lines from being executed.

HTML comments are used to comment out some code for debugging the errors while execution.

Simple HTML Comment

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>IFrame</title>
        </head>
        <body>
                <p>Commenting paragraph 2 with simple comment tag</p>
                <!-- Commenting Paragraph2 -->
                <p>This is paragraph 1</p>
                <!-- p>This is paragraph 2</p -->
                <p>This is paragraph 3</p>
                <p>This is paragraph 4</p>
                <p>This is paragraph 5</p>
        </body>

</html>

Output :

Online html learning !!!

Click to Learn More about – HTML Tutorial for beginners

What are the types of comments ?

There are two types of comments in HTML.


1. Single-line comment.

2. Multi-line comment.

1. Single-line comment.

Single-line comment prevents the single line code from being executed.

Example :

<!-- HTML should have proper DOCTYPE -->
<!DOCTYPE html>
<!-- HTML starts with <html> tag -->
<html>
        <head>
        <!-- head starts with <head> tag -->
                <!-- This is the title section -->
                <title>IFrame</title>
        <!-- head starts with </head> tag -->
        </head>
        <body>
        <!-- body starts with <body> tag -->
                <p>Explaining the code flow with simple comment tag</p>
                <p>This is paragraph 1</p>
                <p>This is paragraph 2</p>
                <p>This is paragraph 3</p>
                <p>This is paragraph 4</p>
                <p>This is paragraph 5</p>
        <!-- body starts with <body> tag -->
        </body>

        <!-- HTML ends with </html> tag -->
</html>

Output :

2. Multi-line comment.

HTML Multi-line comments is used to comment on bigger parts (a few lines) of code.


It needs proper start-point and closing part.

It can be used before, after and middle of the javascript statements.

Multi-line code preventing multiple lines of code being executed.

Multi-line comment within the code.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>IFrame</title>
        </head>
        <body>
                <p>Commenting paragraph 1,2,3,4,5 with multiple comment tag</p>
                <!-- p>This is paragraph 1</p>
                <p>This is paragraph 2</p>
                <p>This is paragraph 3</p>
                <p>This is paragraph 4</p>
                <p>This is paragraph 5</p -->
                <p>This is paragraph 6</p>
                <p>This is paragraph 7</p>
                <p>This is paragraph 8</p>
                <p>This is paragraph 9</p>
                <p>This is paragraph 10</p>
        </body>
</html>

Output :

Multi-line comment outside the code.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>IFrame</title>
        </head>
        <body>
                <p>Commenting paragraph 6,7,8,9 with multiple comment tag</p>
                <p>This is paragraph 1</p>
                <p>This is paragraph 2</p>
                <p>This is paragraph 3</p>
                <p>This is paragraph 4</p>
                <p>This is paragraph 5</p>
                <!--
                <p>This is paragraph 6</p>
                <p>This is paragraph 7</p>
                <p>This is paragraph 8</p>
                <p>This is paragraph 9</p>
                -->
                <p>This is paragraph 10</p>
        </body>
</html>

Output :