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