References

Beginner-friendly references for web development, with live, editable examples.

The HTML <hr> tag

Element All modern browsers Updated
Quick answer

The HTML <hr> element represents a thematic break between paragraph-level content: a shift in topic or scene. It is a void element rendered as a horizontal rule; it carries meaning, so do not use it purely as a decorative line.

Overview

The <hr> element marks a thematic break between paragraph-level content: a shift in topic within a section, or a scene change in a story. Browsers render it as a horizontal rule, but its purpose is semantic, not decorative.

All of its old presentational attributes (size, color, noshade, width, align) are obsolete. Style it entirely with CSS instead, setting its border, height and color.

For a divider that is purely decorative and carries no thematic meaning, do not use <hr>; apply a CSS border to the surrounding element instead. Reserve <hr> for genuine topic shifts so it stays meaningful.

Syntax

<p>End of one topic.</p>
<hr>
<p>Start of another.</p>

Example

Live example 
<p>First topic.</p>
<hr style="border:none;border-top:1px solid #cbd5e1;">
<p>Second topic.</p>

Best practices

  • Use <hr> for a genuine thematic break: a change of topic or scene.
  • Style it with CSS (border, height, color); the old presentational attributes are obsolete.
  • For a purely decorative divider, use a CSS border on a surrounding element instead.
  • It is a void element: no closing tag and no content.

Frequently asked questions

What does the hr element mean?
A thematic break between paragraph-level content: a change of topic or scene. It is rendered as a horizontal rule but has semantic meaning.
How do I style the hr element?
With CSS: set its border, height and color. The old size, width and color attributes are obsolete.
Should I use hr just for a decorative line?
No. For a purely decorative divider, apply a CSS border to a surrounding element. Reserve <hr> for real topic breaks.
Does hr need a closing tag?
No. It is a void element written as <hr> with no closing tag.
hgroup html