<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

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

color

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

noshade

Sets the rule to have no shading.

size

Sets the height, in pixels, of the rule.

width

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 Standard
# the-hr-element

Browser compatibility

BCD tables only load in the browser

See also