← HTML & CSS

Horizontal rule (hr)

A self-closing HTML element that draws a horizontal line across the page, used to create a visual and thematic break between sections.

Part of: HTML and CSS Journey — Module 11

What it does: The <hr> here draws a horizontal line between the two headings. It has no content and no closing tag. <hr> is used to signal a meaningful shift in content, such as between two chapters or sections. <hr> is self-closing - it has no content and no closing tag. Writing </hr> is invalid HTML. HTML tag names must be lowercase. The correct form is <hr> not <HR>. Both <hr> and <hr/> are accepted in HTML5. The self-closing slash is optional. <hr> represents a thematic break - a topic shift or scene change. For a line break within text, use <br>. The correct element is <hr>. There is no <line> element in standard HTML.

Common mistakes: <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. HTML tag names must be lowercase. <HR> with capital letters is non-standard. The correct form is <hr> in lowercase.

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 Horizontal rule (hr) (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

True or false: <hr> needs a closing </hr> tag.

FalseTrue

Matches

↓

<hr> is self-closing - it must not have a closing </hr> tag

Applying

Meanings

Term

<hr>

Meaning

A self-closing HTML element that draws a horizontal line across the page, used to create a visual and thematic break between sections.

Practice

<body>

Testing

Gaps

Check Answer

Spots

1</hr>

2<p>Section one.</p>

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. True or false: <hr> needs a closing </hr> tag.

A. False ✓

B. True

<hr> is self-closing - it has no content and no closing tag. Writing </hr> is invalid HTML.

2. What does the <hr> element draw on a page?

A. A horizontal line ✓

B. A vertical divider

<hr> draws a full-width horizontal line. It is used to create a visual and thematic break between sections.

3. True or false: <HR> with capital letters is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. The correct form is <hr> not <HR>.

4. True or false: <hr/> and <hr> are both valid in HTML5.

A. True ✓

B. False

Both <hr> and <hr/> are accepted in HTML5. The self-closing slash is optional.

5. What kind of break does <hr> represent?

A. A thematic break between sections ✓

B. A line break within a paragraph

<hr> represents a thematic break - a topic shift or scene change. For a line break within text, use <br>.

Match the Pairs

<p>Part one.</p> <hr> <p>Part two.</p> → A horizontal line drawn between two paragraphs - creates a visual and thematic break

<hr/> → A self-closing horizontal rule - the trailing slash is optional in HTML5 but both forms are valid

<hr> is self-closing - it has no content and needs no closing tag → <h1>Intro</h1> <hr> <h2>Details</h2>

<hr> represents a thematic break - a shift in topic or scene → <p>Chapter one ends here.</p> <hr> <p>Chapter two begins.</p>

<hr></hr> → <hr> is self-closing - it must not have a closing </hr> tag

<HR> → HTML tag names must be lowercase - <HR> should be written as <hr>

Key Term

<hr>

A self-closing HTML element that draws a horizontal line across the page, used to create a visual and thematic break between sections.

Fill in the Blanks

1. <p>First section.</p> <hr> <p>Second section.</p>

Hint: Type the self-closing element that draws a horizontal dividing line

2. <p>Topic one.</p> <hr/> <p>Topic two.</p>

Hint: Type the element name used in the self-closing horizontal rule tag

3. <h1>Chapter One</h1> <hr> <p>Content starts here.</p>

Hint: Type the tag that places a horizontal line between sections

4. <body> <p>Intro.</p> <hr> <p>Conclusion.</p> </body>

Hint: Type the element name that creates a thematic break with a horizontal line

5. <h2>Part A</h2> <p>Details.</p> <hr> <h2>Part B</h2>

Hint: Type the self-closing tag that visually separates two sections

Spot the Error

Question 1

A </hr>

B <p>Section one.</p>

C <p>Section two.</p>

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

Question 2

A <body>

B <p>Intro text.</p><HR><p>More text.</p>

C <h2>Next section</h2>

D </body>

Line B — HTML tag names must be lowercase. <HR> with capital letters is non-standard. The correct form is <hr> in lowercase.

Question 3

A <h1>Title</h1>

B <p>Content here.</p>

C <hr></hr>

D <h2>Next</h2>

Line C — <hr> is self-closing and must never have a closing </hr> tag. The correct form is just <hr> or <hr/>.

Question 4

A <body>

B <h1>Welcome</h1>

C <p>Introduction.</p>

D <horizontal-rule>

E <h2>Details</h2>

Line D — <horizontal-rule> is not a valid HTML element. The correct self-closing element for a horizontal divider is <hr>.

Question 5

A <body>

B <p>Part one.</p>

C <hr>Text inside hr</hr>

D <p>Part two.</p>

E </body>

Line C — <hr> is self-closing and takes no content. Text must not be placed inside <hr>, and </hr> is not a valid closing tag.

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?