HTML Tutorial: Comment

by Ridwan Fadilah, updated on Mar 09, 2020 HTML Tutorial: Comment

Learned and understanding basic tutorial HTML Comment use

HTML is easy to learn. But even it easy, sometimes we forget where we placed the element that have we write. Now, in this tutorial, we'll learn about HTML Comment use to overcome this problem.


Definition and Usage

HTML comment is an element in HTML used to insert comment or information to an HTML document. Comment can be used to explain your code.


How to Use HTML Comment?

To use HTML Comment, you only need to add the following syntax to your HTML source code:

<!-- add your comment here -->

The exclamation point only needed in the opening tag, no need to add in the closing tag.
To make it's easier to understand, let's see the example.

Example 1:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

    <h1>HTML Comments</h1>

    <!-- This is a paragraph -->
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </body>
    </html>

If needed, you can add more information.

Example 2:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

    <h1>HTML Comments</h1>

    <!-- This is a paragraph -->
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <!-- Add more information here -->

    </body>
    </html>

The HTML comment is not displayed by the browser:

HTML Tutorial: Comment - Preview


Valid and Invalid Comments

Let's start with an invalid comment. Every you work with HTML Comment, you must also make sure (less than "<" and the exclamation point "!") is no space. Invalid comments will appear in the browser.

Example 3:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

    <h1>HTML Comments</h1>

    <!-- This is a paragraph -->
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    < !-- invalid comment -->

    </body>
    </html>

This is how the HTML code above will be displayed in a browser:

 HTML Tutorial: Comment - Invalid Comment


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

Example 4:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

    <h1>HTML Comments</h1>

    <!-- Valid Comment -->
    <p>Here is a valid comment, comment will be wiped off by the browser.</p>

    </body>
    </html>

This is how the HTML code above will be displayed in a browser:

HTML Tutorial: Comment - valid comment

Multiline HTML Comment

It's no problem if you have a long comment. You can use the multiline HTML comment in every HTML document. Same as a single line comment, opening and closing tags are needed. Using the same tag and place the text in the same area. 

Example 5:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>

    <h1>HTML Comments</h1>

    <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nostrum harum voluptatum ullam quam! Officiis architecto fugiat odio nesciunt nobis odit quos, quibusdam adipisci quod illum vero eligendi quae sapiente possimus impedit aliquid eos repellat fuga dolores dolore repudiandae officia sequi! Illum non facilis facere vero sint? Dignissimos quas ducimus explicabo unde nemo cum, enim ad tempora itaque dolorum molestias officia inventore voluptates quibusdam animi nihil esse eveniet libero modi asperiores voluptate omnis laborum? Ab odio quae nisi consequuntur qui fuga, quas nesciunt commodi molestiae dicta tenetur obcaecati. Ut, itaque? Libero odit voluptate natus mollitia quas a vero temporibus sunt provident voluptatibus qui suscipit nemo porro, laudantium aut officia maxime distinctio similique deleniti, minus, repudiandae eum? Alias, quasi error quidem corporis quis nam nostrum eius, tempore consequatur saepe odio quibusdam hic, quos veritatis modi sed velit architecto voluptatibus. -->

    <p>This is a paragraph with multiline comment</p>

    </body>
    </html>

Same as before, the comment keeps wiped off by the browser:

HTML Tutorial: Comment - Multiline comments

Comment out HTML Lines

The HTML comment is not only for adding some information in your HTML document. Comments can be used to comment on the HTML lines when you get some error on your page, or if you don't want to display an element for a while. Let's see the example below.

Example 6:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>

    <h1>HTML Comments</h1>

    <h2>This is a Heading 2</h2>

    <h3>This is a Heading 3</h3>

    <!-- <h4>This is a Heading 4</h4> -->    

    <p>The "h4" element is commented and it will not be displayed by the browser.</p>
    
</body>
</html>

This is how the HTML code above will be displayed in a browser:

HTML Tutorial: Comment - HTML Lines


That a basic about how to use HTML Comments in an HTML document. FYI, the comment is not only used in the HTML lines and elements. Comments also used in the stylesheet and script document but with a different format. 

That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:

Thanks for reading this tutorial. You can find the full source code of these examples on our GitHub.

Loading…