What's the purpose of <hr>?

Difficulty: 2/10

semantic HTML, visual separation, accessibility

Purpose of the <hr> Tag in HTML

The <hr> tag in HTML is used to insert a horizontal rule (a thematic break) between sections of content. It visually separates content and indicates a shift in topic or context.

Basic <hr> Example

Key Points About <hr>

1<hr> is a void element (it has no closing tag).
2
It creates a horizontal line across the page.
3
Used to separate sections or indicate thematic breaks.
4
Its appearance (color, thickness, style) can be customized with CSS.

Custom Styled <hr>

Scenario Questions

0-2 years experience

1You need a simple visual break between two paragraphs on a static page. How would you use <hr> and what should you keep in mind?
2If you place an <hr> inside a <section>, what does it communicate to the browser and to assistive technology?
3What are the downsides of replacing an <hr> with a div that has a top border for visual separation?

Follow-up Questions

How does an <hr> affect screen readers and other assistive tools?
When would you choose a CSS border over an <hr> for visual separation?
What default styles does the browser apply to <hr> and how can you customize them?