<hr>: The Thematic Break (Horizontal Rule) element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Try it

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

Attributes

This element's attributes include the global attributes.

align Deprecated Non-standard

Sets the alignment of the rule on the page. If no value is specified, the default value is left.

color Deprecated Non-standard

Sets the color of the rule through color name or hexadecimal value.

noshade Deprecated Non-standard

Sets the rule to have no shading.

size Deprecated Non-standard

Sets the height, in pixels, of the rule.

width Deprecated Non-standard

Sets the length of the rule on the page through a pixel or percentage value.

Example

HTML

html
<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>

<hr />

<p>
  This is the second paragraph of text. This is the second paragraph of text.
  This is the second paragraph of text. This is the second paragraph of text.
</p>

Result

Technical summary

Content categories Flow content.
Permitted content None; it is a void element.
Tag omission Must have a start tag and must not have an end tag.
Permitted parents
Implicit ARIA role separator
Permitted ARIA roles presentation or none
DOM interface HTMLHRElement

Specifications

Specification
HTML
# the-hr-element

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hr
align
DeprecatedNon-standard
color
DeprecatedNon-standard
<hr> in <select>
noshade
DeprecatedNon-standard
size
DeprecatedNon-standard
width
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

See also