← HTML & CSS

HTML comments

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

Part of: HTML and CSS Journey — Module 7, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 24

Understanding HTML comments in HTML & CSS

What it does: Every HTML comment must begin with <!-- and end 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 <!-- and -->. HTML comments can span multiple lines - everything between <!-- and --> 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 class and your students practise it interactively.

🖨 Print worksheet + answer key Add HTML comments to a class →

This module's key terms are also in a printable crossword (Modules 1–12) and word search (Modules 1–23).

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 <!-- and --> 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.

The 'Constellation Wolf' badge — Space Legend, one of Cloodit's 106 collectible badges
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.

Add to 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 <!-- and -->.
5. Can an HTML comment span multiple lines?
A. No
B. Yes ✓
HTML comments can span multiple lines - everything between <!-- and --> is commented out, regardless of line breaks.

Match the Pairs

<!-- This is a comment --> → Text between <!-- and --> is ignored by the browser and never shown on the page
<!-- <p>Old text</p> --> → Wrapping HTML in a comment hides it from the page without deleting it from the source code
An HTML comment opens with <!-- and closes with --> → <!-- TODO: add nav -->
Comments are visible in the page source but not in the browser window → <h1>Title</h1> <!-- section break --> <p>Text</p>
<!- This is a comment --> → The opening marker needs two hyphens: <!-- not <!-
<!-- unclosed comment <p>Text</p> → Every comment must be closed with --> - an unclosed comment will hide all following HTML

Key Term

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

Fill in the Blanks

1. <body> <!-- This is a comment --> </body>
Hint: Type the characters that open an HTML comment
2. <body> <!-- This is a comment --> </body>
Hint: Type the characters that close an HTML comment
3. <body> <!-- Navigation --> <h1>Home</h1> </body>
Hint: Type the closing marker that ends an HTML comment
4. <body> <!-- <p>Draft text</p> --> <p>Live text</p> </body>
Hint: Type the opening marker that starts an HTML comment
5. <body> <!-- TODO: add image --> <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 open and --> to close, not the // style used in JavaScript.
Question 5
A <body>
B <!-- start -->
C <p>Text</p>
D <!-- <!-- nested --> -->
E </body>
Line D — Nested comments are not valid HTML. <!-- cannot appear inside another comment. The inner <!-- should be removed.

Student with a class code? Join your class →