The <hr> Element
As defined in the HTML Living Standard, the <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a transition to another topic within a section of a reference book.
The first topic ends here. We are about to shift gears to a completely different subject matter.
This is the second topic. The horizontal rule above signals the transition to the user.
A more traditional, ornamental thematic break used in literature or long-form essays.
<p>End of scene one.</p>
<hr>
<p>Start of scene two.</p>
View HTML Living Standard: The hr element
Meaning, Not Presentation
A common misconception is that <hr> is a presentational element used only to draw a line. While it does render a line by default, its primary purpose is semantic.
- Thematic Break: Use it when the flow of the content shifts significantly.
- Section Divider: It can be used to separate different sections within an
<article>or<section>that do not require a new heading. - Presentational Lines: If you only want a line for visual styling (e.g., a border under a header), use the CSS
borderproperty instead of an<hr>.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The <hr> element is mapped to the ARIA separator role. Screen readers announce it as "separator" or "horizontal rule," allowing users to perceive the thematic break that sighted users see as a line. This ensures that the structure of the document is equivalent for all users.
Styling with CSS
The default browser styling for <hr> is often a simple gray line. Following SMACSS Module Rules, you should customize this to fit your design system while maintaining its visibility.
hr {
border: 0;
height: 1px;
background: var(--color-primary);
opacity: 0.2;
margin: 2rem 0;
}
A11y Tip: Decorative HRs
If an <hr> is used purely for visual flair and does not represent a thematic break, you should add aria-hidden="true" or role="presentation" to prevent it from cluttering the screen reader's output.