Text

Horizontal rule

Published on

Description

The horizontal rule (<hr>) represents a thematic break between paragraph-level content. It visually separates sections of content that are related but distinct.

Use horizontal rules to indicate a shift in topic within a section. Do not use them purely for decorative purposes; use CSS borders instead.

Example

Open in new tab
View HTML markup 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Accessibility

  • The <hr> element has an implicit ARIA role of separator.
  • Screen readers announce horizontal rules as separators, helping users understand content structure.
  • No keyboard interaction is needed as it is a static, non-interactive element.
  • Headings — for creating content hierarchy within sections
  • Paragraphs — for the text content separated by horizontal rules

Variables

None