Horizontal rule (hr)
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. True or false: <hr> needs a closing </hr> tag.
2. What does the <hr> element draw on a page?
3. True or false: <HR> with capital letters is valid HTML.
4. True or false: <hr/> and <hr> are both valid in HTML5.
5. What kind of break does <hr> represent?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<p>Part one.</p> <hr> <p>Part two.</p> | AA horizontal line drawn between two paragraphs - creates a visual and thematic break | |
| 2<hr/> | BHTML tag names must be lowercase - <HR> should be written as <hr> | |
| 3<hr> is self-closing - it has no content and needs no closing tag | CA self-closing horizontal rule - the trailing slash is optional in HTML5 but both forms are valid | |
| 4<hr> represents a thematic break - a shift in topic or scene | D<hr> is self-closing - it must not have a closing </hr> tag | |
| 5<hr></hr> | E<h1>Intro</h1> <hr> <h2>Details</h2> | |
| 6<HR> | F<p>Chapter one ends here.</p> <hr> <p>Chapter two begins.</p> |
C
Definitions
<hr>
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<p>First section.</p>
<___>
<p>Second section.</p>
2.
<p>Topic one.</p>
<___/>
<p>Topic two.</p>
3.
<h1>Chapter One</h1>
<___>
<p>Content starts here.</p>
4.
<body>
<p>Intro.</p>
<___>
<p>Conclusion.</p>
</body>
5.
<h2>Part A</h2>
<p>Details.</p>
<___>
<h2>Part B</h2>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
</hr>
B
<p>Section one.</p>
C
<p>Section two.</p>
Question 2
A
<body>
B
<p>Intro text.</p><HR><p>More text.</p>
C
<h2>Next section</h2>
D
</body>
Question 3
A
<h1>Title</h1>
B
<p>Content here.</p>
C
<hr></hr>
D
<h2>Next</h2>
Question 4
A
<body>
B
<h1>Welcome</h1>
C
<p>Introduction.</p>
D
<horizontal-rule>
E
<h2>Details</h2>
Question 5
A
<body>
B
<p>Part one.</p>
C
<hr>Text inside hr</hr>
D
<p>Part two.</p>
E
</body>
Answer Key
Horizontal rule (hr)
Section A: Quick Questions
Q1
A — False
Q2
A — A horizontal line
Q3
B — False
Q4
B — True
Q5
A — A thematic break between sections
Section B: Match the Pairs
Q1
<p>Part one.</p>
<hr>
<p>Part two.</p> → A horizontal line drawn between two paragraphs - creates a visual and thematic break
Q2
<hr/> → A self-closing horizontal rule - the trailing slash is optional in HTML5 but both forms are valid
Q3
<hr> is self-closing - it has no content and needs no closing tag → <h1>Intro</h1>
<hr>
<h2>Details</h2>
Q4
<hr> represents a thematic break - a shift in topic or scene → <p>Chapter one ends here.</p>
<hr>
<p>Chapter two begins.</p>
Q5
<hr></hr> → <hr> is self-closing - it must not have a closing </hr> tag
Q6
<HR> → HTML tag names must be lowercase - <HR> should be written as <hr>
Section C: Definitions
Q1
<hr> — A self-closing HTML element that draws a horizontal line across the page, used to create a visual and thematic break between sections.Section D: Fill in the Blanks
Q1
<p>First section.</p>
<hr>
<p>Second section.</p>Q2
<p>Topic one.</p>
<hr/>
<p>Topic two.</p>Q3
<h1>Chapter One</h1>
<hr>
<p>Content starts here.</p>Q4
<body>
<p>Intro.</p>
<hr>
<p>Conclusion.</p>
</body>Q5
<h2>Part A</h2>
<p>Details.</p>
<hr>
<h2>Part B</h2>Section E: Spot the Error
Q1
A — <hr> is a self-closing element - it must not be written as </hr>. The correct form is simply <hr> with no forward slash at the start.
Q2
B — HTML tag names must be lowercase. <HR> with capital letters is non-standard. The correct form is <hr> in lowercase.
Q3
C — <hr> is self-closing and must never have a closing </hr> tag. The correct form is just <hr> or <hr/>.
Q4
D — <horizontal-rule> is not a valid HTML element. The correct self-closing element for a horizontal divider is <hr>.
Q5
C — <hr> is self-closing and takes no content. Text must not be placed inside <hr>, and </hr> is not a valid closing tag.