Français

<hr>

Separate two topics visually and semantically

— 1 min read

  • HTML
  • accessibility
  • semantics
  • text

<hr> — The thematic break

The <hr> element marks a thematic break between two blocks of content within the same section. It is not a decorative line: it signals a change of topic or scene.

When to use it

You want to signal a topic change in an article, a scene transition in a story, or a separation between two content groups that do not warrant their own <section>.

What you gain

Accessibility: screen readers announce "separator" when they encounter an <hr>. The user knows a new topic is starting.

Code example

<article>
  <h2>Morning routine</h2>
  <p>Start with a glass of water and light stretching.</p>
 
  <hr>
 
  <h2>Evening routine</h2>
  <p>Wind down with reading and no screens.</p>
</article>

Further reading