HTML is easy to learn. But even though it is easy, sometimes we forget where we placed the element that we wrote. Now, in this tutorial, we'll learn how to use HTML Comments to overcome this problem.
Definition and Usage
An HTML comment is an element in HTML used to insert comments or information to an HTML document. Comments can be used to explain your code.
How to Use HTML Comments?
To use HTML Comment, you only need to add the following syntax to your HTML source code:
<!-- add your comment here -->The exclamation point is only needed in the opening tag; no need to add in the closing tag.
To make it 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 browser does not display the HTML comment:
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:
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:
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 placing 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 getting wiped off by the browser:
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 an 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:
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 are also used in the stylesheet and script document, but with a different format.
That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or relate,d you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks for reading this tutorial. You can find the full source code of these examples on our GitHub.