FactorPad
Faster Learning Tutorials

HTML comment tag

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.
Paul Alan Davis, December 27, 2017
Updated: August 9, 2018
With the comment tag we can document our HTML code. How fun! Let's get going.

Outline Back Next

~/ home  / tech  / html5  / reference  / html comment tag


HTML comment tag

Beginner

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 here.

  • For the complete HTML tag list, click Outline.
  • To learn about the DOCTYPE declaration, click Back.
  • For an intro to the html tag, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / html comment tag



 
 
Keywords:
html comment tag
html comment
html multiline comment
html partial line comment
comment out html
html notes
single line html comment
multiline line html comment
html5 comment