HTML Comments Tutorial

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 on 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 `<!–` without any space between these characters and then ends 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

See the Pen commenting in HTML by Omid Dehghan (@odchan1) on CodePen.

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 one line and put the closing part of the comment `–>` in another line. Now the space you get in between will be the area that you can write comments in there.

Example: multiline comments in HTML

See the Pen multiline comments in HTML by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen commenting out HTML by Omid Dehghan (@odchan1) on CodePen.


Top Technologies