The <hr> Element
As defined in the HTML Living Standard, the <hr> element represents a thematic break between paragraph-level content. For example, a change of scene in a story, or a transition to a different topic within a section.
This is the first thematic section of the document.
This is the second thematic section, separated by a horizontal rule.
<p>End of Chapter 1</p>
<hr>
<p>Beginning of Chapter 2</p>
View HTML Living Standard: The hr element
Accessibility: Thematic Breaks
The <hr> element is more than just a visual line; it is a semantic marker.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
When a screen reader encounters an <hr>, it announces a "horizontal rule" or "separator." This informs the user that the topic has shifted, providing a structural cue that a purely visual line (like a border or an image) would not provide.
Usage and Styling
- Void Element: The
<hr>is a void element, meaning it has no closing tag. - Styling: While browsers render it as a gray line, it can be styled with CSS to match the site's design (e.g., changing color, thickness, or adding margins).
- Avoid Overuse: Use
<hr>only when there is a genuine thematic shift. For simple visual spacing, use CSS margins or padding.
A11y Tip: Visual vs. Semantic
Never use <hr> solely for decoration. If you just want a line to separate a header from a body, use a border-bottom on the header. Reserve the <hr> for actual shifts in content topic.