HTML comments

An HTML comment - text placed between  is ignored by the browser and never shown on the page.

Part of: HTML and CSS Journey — Module 7

What it does: Every HTML comment must begin with . Anything in between is the comment text. The comment appears in the HTML file and can be read by anyone who views the source, but it is never rendered on the page. Content inside  is ignored by the browser and never shown to the user. // is used for comments in JavaScript, not HTML. HTML comments always use . HTML comments can span multiple lines - everything between  is commented out, regardless of line breaks. Nested comments are not valid HTML. The first --> encountered closes the comment, even if there is an inner <!--.

Common mistakes: The comment opening marker must be <!-- with no spaces between < and !--. Writing <! -- is invalid syntax. The opening comment marker must be <!-- with two hyphens. Writing <!- with only one hyphen is invalid syntax.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of HTML comments (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which of these correctly opens an HTML comment?

<!--<!-

Matches

<!- This is a comment -->

↓

The opening marker needs two hyphens: <!-- not <!-

Applying

Meanings

Term

Meaning

An HTML comment - text placed between  is ignored by the browser and never shown on the page.

Practice

<body>

Testing

Gaps

This is a comment -->

Check Answer

Spots

1<! -- This is a comment -->

2 <h1>Title</h1>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which of these correctly opens an HTML comment?

A. <!-- ✓

B. <!-

An HTML comment must start with <!-- - two hyphens after the exclamation mark. One hyphen is not enough.

2. True or false: HTML comment text is displayed on the page.

A. False ✓

B. True

Content inside  is ignored by the browser and never shown to the user.

3. Which of these correctly closes an HTML comment?

A. --> ✓

B. ->

A comment must end with --> - two hyphens followed by a closing angle bracket.

4. True or false: // is valid HTML comment syntax.

A. False ✓

B. True

// is used for comments in JavaScript, not HTML. HTML comments always use .

5. Can an HTML comment span multiple lines?

A. Yes ✓

B. No

HTML comments can span multiple lines - everything between  is commented out, regardless of line breaks.

Match the Pairs

→ Text between  is ignored by the browser and never shown on the page

→ Wrapping HTML in a comment hides it from the page without deleting it from the source code

An HTML comment opens with  →

Comments are visible in the page source but not in the browser window → <h1>Title</h1>  <p>Text</p>

<!- This is a comment --> → The opening marker needs two hyphens: <!-- not <!-

- an unclosed comment will hide all following HTML

Key Term

An HTML comment - text placed between  is ignored by the browser and never shown on the page.

Fill in the Blanks

1. <body>  </body>

Hint: Type the characters that open an HTML comment

2. <body>  </body>

Hint: Type the characters that close an HTML comment

3. <body>  <h1>Home</h1> </body>

Hint: Type the closing marker that ends an HTML comment

4. <body>  <p>Live text</p> </body>

Hint: Type the opening marker that starts an HTML comment

5. <body>  <p>Content</p> </body>

Hint: Type the two hyphens and angle bracket that close a comment

Spot the Error

Question 1

A <! -- This is a comment -->

B <h1>Title</h1>

C <p>Text</p>

Line A — The comment opening marker must be <!-- with no spaces between < and !--. Writing <! -- is invalid syntax.

Question 2

A <body>

B <!- This is a comment -->

C <p>Content</p>

D </body>

Line B — The opening comment marker must be <!-- with two hyphens. Writing <!- with only one hyphen is invalid syntax.

Question 3

A <body>

B <h1>Heading</h1>

C <!-- Note: update this ->

D <p>Text</p>

Line C — The comment closing marker must be --> with two hyphens. Writing -> with only one hyphen leaves the comment unclosed.

Question 4

A <body>

B <h1>Title</h1>

C <p>Hello</p>

D // This is a note

Line D — // is not valid HTML comment syntax. HTML comments must use  to close, not the // style used in JavaScript.

Question 5

A <body>

B

C <p>Text</p>

D  -->

E </body>

Line D — Nested comments are not valid HTML. <!-- cannot appear inside another comment. The inner <!-- should be removed.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?