hr
The horizontal rule element represents a thematic break between paragraph-level content, signaling a shift in topic or scene.
Overview
The <hr> element creates a thematic break in HTML content. Despite its name, it represents a semantic break rather than just a visual line. Use it to separate sections of content that have different topics or themes.
Content in the first thematic section. This paragraph discusses one topic.
Content in the second thematic section. This paragraph shifts to a different topic.
<p>The story begins...</p><hr /><p>Three days later...</p>When to Use
- Scene changes - In stories or narratives when the setting or time changes
- Topic shifts - When transitioning to a different subject within the same document
- Section breaks - To separate major content areas without using a new heading
- Before footnotes - To separate main content from endnotes or footnotes
When Not to Use
- Visual spacing - Use CSS margins or padding instead
- Decorative lines - Use CSS borders on containers instead
- Between every section - Headings already provide visual separation
- Before/after headers or footers - Use semantic elements instead
Default Style
The default horizontal rule displays as a thin border line with vertical margin.
Decorative Variant
The .decorative class creates a centered dot pattern instead of a line, useful for creative writing or less formal contexts.
<p>The end of the scene.</p><hr class="decorative" /><p>A new setting emerges.</p>Use Cases for Decorative
- Scene breaks in fiction
- Time jumps in narratives
- Thought transitions in essays
- Section breaks in newsletters
Custom Ornament
The data-ornament attribute lets you specify any text or symbol as the divider content. This is more flexible than the .decorative class, which always uses dots.
Unlike plain <hr> and .decorative rules, an explicit data-ornament value is preserved across all themes — your chosen symbol always renders as specified.
<hr data-ornament="❧" /> <hr data-ornament="~ ~ ~" /> <hr data-ornament="§" /> <hr data-ornament="✦ ✦ ✦" /> <hr data-ornament="⁂" />Common Ornament Characters
| Character | Usage | Example |
|---|---|---|
| ❧ | Hedera (floral heart) | <hr data-ornament="❧" /> |
| § | Section sign | <hr data-ornament="§" /> |
| ✦ ✦ ✦ | Stars | <hr data-ornament="✦ ✦ ✦" /> |
| ~ ~ ~ | Tildes | <hr data-ornament="~ ~ ~" /> |
| ⁂ | Asterism | <hr data-ornament="⁂" /> |
Examples in Context
Blog Post with Thematic Break
<h2>My Trip to Japan</h2><p>We started in Tokyo...</p><hr /><p>A week later, we found ourselves in Kyoto...</p>Article with Footnotes
<p>The findings suggest a correlation<sup>1</sup>.</p><hr /><p><small><sup>1</sup> Smith et al., 2023.</small></p>Scene Break in Fiction
<p>She closed the door, knowing she would never return.</p><hr class="decorative" /><p>Twenty years later, she stood at that same door.</p>CSS Properties
hr { border: none; border-block-start: var(--border-width-thin) solid var(--color-border); margin-block: var(--size-xl);} /* Decorative variant */hr.decorative { border: none; text-align: center; &::before { content: "* * *"; color: var(--color-text-muted); letter-spacing: 0.5em; }} /* Custom ornament variant */hr[data-ornament] { border: none; text-align: center; &::before { content: attr(data-ornament); color: var(--color-text-muted); letter-spacing: 0.25em; }}Key Features
- No default border - Resets browser default to use custom styling
- Logical properties - Uses
border-block-startfor RTL support - Generous spacing -
margin-block: var(--size-xl)for clear separation - Decorative content - Uses
::beforepseudo-element for dots - Custom ornament - Uses
attr(data-ornament)for user-defined symbols
Customization
You can customize the horizontal rule with CSS custom properties:
/* Thicker divider */hr.thick { border-block-start-width: var(--border-width-thick);} /* Colored divider */hr.accent { border-color: var(--color-interactive);} /* Tighter spacing */hr.compact { margin-block: var(--size-m);}Accessibility
Semantic Meaning
The <hr> element has an implicit ARIA role of separator. Screen readers may announce it as a separator or horizontal rule, helping users understand the content structure.
Best Practices
- Use for thematic breaks only - Don't use hr for purely visual decoration
- Consider context - Ensure the break makes sense without visual styling
- Don't overuse - Too many breaks can be disorienting for screen reader users
- Combine with headings - For major sections, a heading may be more appropriate
ARIA Considerations
If using hr purely for decoration, you can hide it from screen readers:
<hr aria-hidden="true" />However, this is generally not recommended. If the break is meaningful, it should be announced. If it's purely decorative, consider using CSS borders instead.
Alternatives to hr
Consider these alternatives depending on your use case:
CSS Border (Decorative)
Content with a bottom border for visual separation only.
More content below the border.
New Section with Heading (Semantic)
<section> <h2>First Topic</h2> <p>Content about the first topic.</p></section><section> <h2>Second Topic</h2> <p>Content about the second topic.</p></section>Comparison
| Method | Use When | Semantic |
|---|---|---|
<hr> |
Thematic break without new heading | Yes |
| CSS border | Visual separation only | No |
<section> + heading |
Major new section with title | Yes |