hr

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.

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.

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.

Common Ornament Characters

Examples in Context

Blog Post with Thematic Break

Article with Footnotes

Scene Break in Fiction

CSS Properties

Key Features

• No default border - Resets browser default to use custom styling
• Logical properties - Uses border-block-start for RTL support
• Generous spacing - margin-block: var(--size-xl) for clear separation
• Decorative content - Uses ::before pseudo-element for dots
• Custom ornament - Uses attr(data-ornament) for user-defined symbols

Customization

You can customize the horizontal rule with CSS custom properties:

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:

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)

New Section with Heading (Semantic)

Comparison

Related

• <h1>-<h6> - Headings that introduce new sections
• <section> - Semantic sectioning element
• <article> - Self-contained content sections
• <p> - Paragraphs separated by hr