HTML comments
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which of these correctly opens an HTML comment?
2. True or false: HTML comment text is displayed on the page.
3. Which of these correctly closes an HTML comment?
4. True or false: // is valid HTML comment syntax.
5. Can an HTML comment span multiple lines?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<!-- This is a comment --> | AThe opening marker needs two hyphens: <!-- not <!- | |
| 2<!-- <p>Old text</p> --> | BWrapping HTML in a comment hides it from the page without deleting it from the source code | |
| 3An HTML comment opens with <!-- and closes with --> | C<!-- TODO: add nav --> | |
| 4Comments are visible in the page source but not in the browser window | D<h1>Title</h1> <!-- section break --> <p>Text</p> | |
| 5<!- This is a comment --> | EEvery comment must be closed with --> - an unclosed comment will hide all following HTML | |
| 6<!-- unclosed comment <p>Text</p> | FText between <!-- and --> is ignored by the browser and never shown on the page |
C
Definitions
<!-- -->
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<body>
___ This is a comment -->
</body>
2.
<body>
<!-- This is a comment ___
</body>
3.
<body>
<!-- Navigation ___
<h1>Home</h1>
</body>
4.
<body>
___ <p>Draft text</p> -->
<p>Live text</p>
</body>
5.
<body>
<!-- TODO: add image ___
<p>Content</p>
</body>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<! -- This is a comment -->
B
<h1>Title</h1>
C
<p>Text</p>
Question 2
A
<body>
B
<!- This is a comment -->
C
<p>Content</p>
D
</body>
Question 3
A
<body>
B
<h1>Heading</h1>
C
<!-- Note: update this ->
D
<p>Text</p>
Question 4
A
<body>
B
<h1>Title</h1>
C
<p>Hello</p>
D
// This is a note
Question 5
A
<body>
B
<!-- start -->
C
<p>Text</p>
D
<!-- <!-- nested --> -->
E
</body>
Answer Key
HTML comments
Section A: Quick Questions
Q1
A — <!--
Q2
A — False
Q3
B — -->
Q4
A — False
Q5
B — Yes
Section B: Match the Pairs
Q1
<!-- This is a comment --> → Text between <!-- and --> is ignored by the browser and never shown on the page
Q2
<!-- <p>Old text</p> --> → Wrapping HTML in a comment hides it from the page without deleting it from the source code
Q3
An HTML comment opens with <!-- and closes with --> → <!-- TODO: add nav -->
Q4
Comments are visible in the page source but not in the browser window → <h1>Title</h1>
<!-- section break -->
<p>Text</p>
Q5
<!- This is a comment --> → The opening marker needs two hyphens: <!-- not <!-
Q6
<!-- unclosed comment
<p>Text</p> → Every comment must be closed with --> - an unclosed comment will hide all following HTML
Section C: Definitions
Q1
<!-- --> — An HTML comment - text placed between <!-- and --> is ignored by the browser and never shown on the page.Section D: Fill in the Blanks
Q1
<body>
<!-- This is a comment -->
</body>Q2
<body>
<!-- This is a comment -->
</body>Q3
<body>
<!-- Navigation -->
<h1>Home</h1>
</body>Q4
<body>
<!-- <p>Draft text</p> -->
<p>Live text</p>
</body>Q5
<body>
<!-- TODO: add image -->
<p>Content</p>
</body>Section E: Spot the Error
Q1
A — The comment opening marker must be <!-- with no spaces between < and !--. Writing <! -- is invalid syntax.
Q2
B — The opening comment marker must be <!-- with two hyphens. Writing <!- with only one hyphen is invalid syntax.
Q3
C — The comment closing marker must be --> with two hyphens. Writing -> with only one hyphen leaves the comment unclosed.
Q4
D — // is not valid HTML comment syntax. HTML comments must use <!-- to open and --> to close, not the // style used in JavaScript.
Q5
D — Nested comments are not valid HTML. <!-- cannot appear inside another comment. The inner <!-- should be removed.