HTML Comment

The HTML comment is a text between the start tag .

Syntax

It is important to note that the start tag contains an exclamation mark (!) but not the end tag.

The HTML comments are not displayed on web pages and are kept hidden. While rendering the source code, browsers hide them on the front end.

HTML comments help create small notes within the HTML document.

While working in a team, other developers can understand your code easily with a hint from these notes.

We also use comments to explain the functionality and purpose of the block of code.

HTML comments help build, debug, or redesign a website.

In previous chapters, you have already seen our examples where we have commented on some codes to explain the functionality and purpose.

Let's see an example of an HTML comment. Click on 'Result on Editor' to view the output of the code.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Comment Example</title>
</head>

<body>

<!--h1 heading to center: This is a comment.-->

<h1 style="text-align:center;">HTML Learning at Result University</h1>

<!--Keep p tag alignment to right-->

<p style="text-align:right;">HTML Learning at Result University is Easy. Bookmarking will help you remember the page. Keep growing.</p>

</body>

</html>

Result on Editor

You notice that the browser has completely ignored the comments while displaying the web page.

HTML comments can really be useful in maintaining code version history.

Example

<!DOCTYPE html>

<!--My Web App Version 1.0-->

<html>

<head>

<title>HTML Comment Example</title>
</head>

<body>

<!--This is a h1 Heading-->

<h1>HTML Learning at Result University</h1>

<!--First paragraph begins from here.-->

<p>HTML Learning at Result University is Easy. Bookmarking will help you remember the page. Keep growing.</p>

</body>

</html>

Result on Editor

There can be scenarios where you want to add some new functionality in the coming days and you want yourself to remind the same when next time you view your code. You simply write a reminder as a comment in your HTML code.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Comment Example</title>
</head>

<body>

<h1>HTML Learning at Result University</h1>

<!--In the next edit. A form will be added here.-->

<p>HTML Learning at Result University is Easy. Bookmarking will help you remember the page. Keep growing.</p>

</body>

</html>

Result on Editor

Sometimes we can also comment out a few lines of code to temporarily hide the content of a few tags. See the example below.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Comment Example</title>
</head>

<body>

<!--<h1>HTML Learning at Result University</h1>-->

<p>In this example h1 heading has been commented out. You can see heading has not been shown on the screen.</p>

</body>

</html>

Result on Editor

Multiline HTML comment

The content of the HTML comment element can extend to multiple lines and such a comment in HTML is referred to as a multiline HTML comment.

The need for the multiline comment arises when we want to provide a more detailed description regarding the section of the code for future reference.

Let's see an example of a multiline HTML comment.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Comment Example</title>
</head>

<body>

<h1>Multiline HTML Comment Example</h1>

<!--In the next edit.

A form will be added here.

Some code has been deleted here.-->

<p>In this example the comment has span over three line. The comment is not displayed on browser screen.</p>

</body>

</html>

Result on Editor

Inline HTML comment

Many a time we come across a situation where we need to hide only a part of the content or code from a single line of HTML code. Such comments are referred to as inline HTML comments.

See an example.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Comment Example</title>
</head>

<body>

<h1>Inline HTML Comment Example</h1>

<!--In the next edit-->

<p><!--In this example the comment has span over three line.--> The comment is not displayed on browser screen.</p>

</body>

</html>

Result on Editor

Chapter Summary

Comments in HTML are enclosed within the  tags.
Browser hides the content of HTML comments on web pages.
Comments can span over multiple lines.
Comments can help developers in code debugging, version history management and future developments.

❮ Previous Next ❯

1. HTML Tutorial

2. Introduction to HTML

5. Web Browser

10. HTML Headings

11. HTML Paragraphs