Comments in HTML

You might also like

You are on page 1of 15

Comments in HTML

Dot Net Tutorials

Back to: HTML Tutorials

Comments in HTML with Examples

In this article, I am going to discuss Comments in


HTML with Examples. Please read our previous
article where we discussed Lists in HTML with
Examples. At the end of this article, you will learn
everything about HTML Comments and their types
with Examples.

Why Comments in HTML?

Comments are some text or code written in your code


to give an explanation about the code, and not visible
to the user. Comments are used in Html to improve
the readability of code and provide some extra
information about the piece of code. Comments are
usually ignored by the browser, so everything we write
inside the comment tags will not be rendered on the
screen. Comments used in Html are called Html
Comments.
It is a good coding 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.

HTML Comment Syntax

The following syntax is used to add comments in the


HTML file. Everything we write inside it is considered
a comment and will be ignored by the browser.

<!– This is a Comment –>

Single Line Comment in HTML

The below example describes how to add a single-line


comment.

<!– <p>This is a single line comment </p> –>

Multiline Comment in HTML

In Html, we can also add multiline comments, multiple


line comments can be useful if we want to add some
instructions or long explanations related to code. The
following is the Multiline Comment Syntax

<!--- This is a Multiline Comment -->

<!---
This is
a
Multiline
Comment
-->

Multiline Comment Example in HTML

<p>Below paragraph is enclosed in multiline


comment</p>

<p>Above paragraph is enclosed in multiline


comment.</p>

<p>Below paragraph is enclosed in multiline


comment</p> <!-- <p>This is a multiline paragraph
</p> --> <p>Above paragraph is enclosed in multiline
comment.</p>

<p>Below paragraph is enclosed in multiline


comment</p>

<!-- <p>This
is a
multiline
paragraph </p> -->

<p>Above paragraph is enclosed in multiline


comment.</p>

Output:
Example:

<p>Below Image is Hidden</p>

<!-- <img src="https://c4.wallpaperflare.com/wallpaper


/530/410/433/buggati-car-car-show-bugatti-chiron-
vehicle-hd-wallpaper-preview.jpg">

<p>Above Image is Hidden</p>

<p>Below Image is Hidden</p> <!-- <img


src="https://c4.wallpaperflare.com/wallpaper/530/410
/433/buggati-car-car-show-bugatti-chiron-vehicle-hd-
wallpaper-preview.jpg"> → <p>Above Image is
Hidden</p>

<p>Below Image is Hidden</p>


<!-- <img src="https://c4.wallpaperflare.com/wallpaper
/530/410/433/buggati-car-car-show-bugatti-chiron-
vehicle-hd-wallpaper-preview.jpg">

<p>Above Image is Hidden</p>

Output:
Note: HTML comments are not displayed in the
browser, but they can help document your HTML
source code.

Hide Content in HTML

Comments can be used to hide a particular element


and prevent it from getting displayed on the screen.

<p>Below paragraph is hidden.</p>

<!-- <p>This is hidden paragraph </p> -->

<p>Above paragraph is hidden.</p>

<p>Below paragraph is hidden.</p> <!-- <p>This is


hidden paragraph </p> --> <p>Above paragraph is
hidden.</p>

<p>Below paragraph is hidden.</p>

<!-- <p>This is hidden paragraph </p> -->

<p>Above paragraph is hidden.</p>

Output:
In the above example, the middle paragraph is ignored
by the browser.

Hide Inline Content

Comments can be used to hide content between the


element.

<p>This <!-- element--> is a Inline Comment.</p>

<p>This <!-- element--> is a Inline Comment.</p>

<p>This <!-- element--> is a Inline Comment.</p>

Output:
In the above example, the word element is ignored by
the browser.
In the next article, I am going to discuss Links in
HTML with Examples. Here, in this article, I try to
explain Comments in HTML with Examples and I
hope you enjoy this HTML Comments with Examples
article.

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles


in his 11-year career. Pranaya Rout has very good
experience with Microsoft Technologies, Including C#,
VB, ASP.NET MVC, ASP.NET Web API, EF, EF
Core, ADO.NET, LINQ, SQL Server, MYSQL,
Oracle, ASP.NET Core, Cloud Computing,
Microservices, Design Patterns and still learning new
technologies.

You might also like