HTML Comments Tutorial - We Work Worldwide

In this section we will learn what the comments are and how to use them in HTML.

Comment on HTML

The HTML comment tag is a way of adding comments to an HTML source code.

You should know that by default if you write comments (simple string of text) without the use of comment tag in an HTML document, those comments will be rendered on the page and so everyone will see it as part of the page! (Which is something that you don’t want to happen!)

Now using the HTML comment tag, we can write comments that will only appear on the source code! Basically, browsers simply ignore a comment element and its content. So you don’t see them rendered on the page.

We use comments in an HTML source code for different reasons like:

When two or more developers are working on the same source code
and one is done part of the work and now want to let the other person
know what has been done and what needs more work.
When describing the layout used for parts of a document and want
to remember so that in the future by reading the comments, learn how
things have been done and so be able to enhance it if
necessary.
Sometimes part of an HTML source code is unnecessary and we want
to disable the use of it in the layout of the document! Well, using the
comments, we can comment out the part of the source code that is not
necessary at the time without entirely removing that from the source
code!

How to HTML Comment? Comment Tag HTML (Syntax and Declaration)

This is the syntax of using comments in HTML:

<!-- comment… -->

Note that a comment starts with  again without any space between these characters.

Now the body you get between the opening and closing parts of a comment is the place where you can leave comments.

Example: commenting in HTML

<!DOCTYPE html>
<html>
<head>
<!-- This is the title of the page -->
<title>HTML is fun 🙂 </title>
<!-- This is the style element where you can write CSS code within its body-->
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<!-- This is the body of the HTML document where we put any element of the document that want to see its content getting rendered on the page -->
<body>
<p><del>Bill Gates</del> <mark>Steve Jobs</mark>: You can't connect the dots looking forward; you can only connect them looking backwards.</p>
</body>
</html>

Multiline Comment in HTML

Using the element showed for the single line commenting, we can write multiline comment as well!

Simply start the comment with  in another line. Now the space you get in between will be the area that you can write comments there.

Example: multiline comments in HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>

<!–

This is the body of the HTML document

where we put any element of the document that want to see

its content getting rendered on the page

–>

<body>
<p><del>Bill Gates</del> <mark>Steve Jobs</mark>: You can't connect the dots looking forward; you can only connect them looking backwards.</p>
</body>
</html>

Commenting Out in HTML

The body of an HTML comment element is the place where browsers simply ignore and jump over! This means anything, we put there will be skipped by browsers and so won’t be interpreted!

This includes the use of source codes in the body of a comment! Basically, if you have part of the source code for an HTML document that temporarily don’t need it, you can surround that source code within the body of a comment (Hence, commenting out the source code) and so browsers will ignore that part and won’t interpret it.

Example: commenting out HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML is fun 🙂 </title>
<style type="text/css">
p{
width: 600px;
}
</style>
</head>
<body>
<p>Steve Jobs: You can't connect the dots looking forward; you can only connect them looking backwards.</p>

<!–

<p>You won't see this text content on your page 🙂 </p>

–>

</body>
</html>