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

BaselineWidely 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

<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p><hr /><p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

hr {  border: none;  border-top: 3px double #333;  color: #333;  overflow: visible;  text-align: center;  height: 5px;}hr::after {  background: #fff;  content: "§";  padding: 0 4px;  position: relative;  top: -13px;}

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 theglobal attributes.

alignDeprecated Non-standard: Sets the alignment of the rule on the page. If no value is specified, the default value isleft.
colorDeprecated Non-standard: Sets the color of the rule through color name or hexadecimal value.
noshadeDeprecated Non-standard: Sets the rule to have no shading.
sizeDeprecated Non-standard: Sets the height, in pixels, of the rule.
widthDeprecated 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 avoid element.
Tag omission	Must have a start tag and must not have an end tag.
Permitted parents	Any element that acceptsflow content `<select>` element
Implicit ARIA role	`separator`
Permitted ARIA roles	`presentation` or`none`
DOM interface	`HTMLHRElement`