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.

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.

Chapter 1: The Beginning

The story begins in a small village at the edge of the forest. Our protagonist wakes to find the village empty.

Chapter 2: The Journey

Three days later, they set out on a journey to discover what happened to the villagers.

<h3>Chapter 1: The Beginning</h3> <p>The story begins...</p> <hr /> <h3>Chapter 2: The Journey</h3> <p>Three days later...</p>

Decorative Variant

The .decorative class creates a centered dot pattern instead of a line, useful for creative writing or less formal contexts.

The end of the first scene. The lights fade to black.

When the lights come up again, we find ourselves in a completely different setting.

<hr class="decorative" />

Use Cases for Decorative

  • Scene breaks in fiction
  • Time jumps in narratives
  • Thought transitions in essays
  • Section breaks in newsletters

Examples in Context

Blog Post with Thematic Break

My Trip to Japan

We started our journey in Tokyo, exploring the bustling streets of Shibuya and the serene gardens of Meiji Shrine.

A week later, we found ourselves in Kyoto. The contrast could not have been more striking...

Article with Footnotes

The research findings suggest a significant correlation between the two variables1.

1 Smith et al., 2023. Journal of Research Studies.

Scene Break in Fiction

She closed the door behind her, knowing she would never return.

Twenty years later, she stood at that same door. The paint had faded, but the memories remained sharp.

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; } }

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

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)

First Topic

Content about the first topic.

Second Topic

Content about the second topic.

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