Build a Better Process

HTML Comment Tag Reference and Examples

The <!-- comment --> tag allows you to add comments in the HTML markup. These comments will not be executed.
  1. About - Understand the purpose of the comment tag.
  2. Syntax - Describe how it is used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review common examples.
face pic by Paul Alan Davis, CFA
Updated: February 23, 2021
With the comment tag we can document our HTML code, similar to other markup and programming languages. Let's see how it works.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-comment-tag.html

An ad-free and cookie-free website.

HTML Comment Tag


The <!-- comment -> tag is essential to document your code with notes for later reference.

HTML Tags Reference

1. About the comment tag

Comments act a helpful reminders for anyone reviewing the HTML markup.

Comments also help with debugging. Here you can add and remove lines by placing a comment around it, instead of deleting it.

The <!-- comment -> tag can be used for single line and multiline comments. The commented lines will be skipped over by the program and not executed.

The <!-- comment -> tag follows an easy to forget pattern that must be followed strictly.

2. Syntax for the comment tag

The <!-- comment -> tag is actually bordered by two strings. On the left is the text string <!-- and on the right is -->. So all of the comment-specific text between these two text strings is off limits to the browser.

In three scenarios below, the interior text string cannot form certain patterns because it would close out a comment tag. So these rules apply.

The interior text string:

  1. Cannot start with > or ->.
  2. Cannot contain <-- or --> or --!>.
  3. Cannot end with <!-.

So it is best to summarize by saying, avoid making comments with these characters.

So a basic HTML document might look like this, with the second line blocked off as a comment.

<!DOCTYPE html> <!-- This is a single line comment --> <html> <head> <title></title> </head> <body></body> </html>

In some circumstances conditions are added to comments to tell the browser to use a specific code for a specific browser. This however is rare.

3. Settings for the comment tag

Unlike most tags, attributes do not apply.

Attribute Purpose
-- --

4. Examples of the comment tag

Example 1 - Comment out lines of text

In this example, we have three "work in progress" page title tags and commented out two of them.

<!DOCTYPE html> <html lang="en"> <head> <!-- <title>Page Title 1</title> --> <title>Page Title 2</title> <!-- <title>Page Title 3</title> --> </head> <body></body> </html>
Example 2 - Comment out a partial line

Here, we have the same scenario except we added a comment to the end of the working title tag.

<!DOCTYPE html> <html lang="en"> <head> <!-- <title>Page Title 1</title> --> <title>Page Title 2</title> <!-- my favorite --> <!-- <title>Page Title 3</title> --> </head> <body></body> </html>

Here, the first part of the line <title>Page Title 2</title> will be interpreted by the browser, but the second part will not.

Example 3 - Comment out multi-line HTML blocks

Here, we use a multi-line comment to block out the first two title tags.

<!DOCTYPE html> <html lang="en"> <head> <!-- <title>Page Title 1</title> <title>Page Title 2</title> --> <title>Page Title 3</title> </head> <body></body> </html>

Only the third <title>Page Title 3</title> will be interpreted by the browser.

Other Related HTML Content

The following are essential tags that should be included in every HTML document.

What's Next?

We also have a YouTube Channel for those who like to watch. Subscribe there and follow @factorpad on Twitter for updates.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-comment-tag.html

html comment tag
html comment
html comment examples
how to add a comment in html
html multi line comment
what is the html comment tag
comment out html
html notes
how to html notes
how to add a comment in html
single line html comment
html5 comment

A newly-updated free resource. Connect and refer a friend today.