`<hr>` HTML thematic break (horizontal rule) element

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 #333333;
  color: #333333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: white;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

Historically, the <hr> element has always 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. Therefore, if you wish to draw a horizontal line, you should do so by adding a border to an existing element using CSS.

The border-* properties (for example, border-style and border-color) allow you to significantly customize a line's appearance, whether you are customizing an <hr> element or a border drawn on a different element.

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

undefined

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	Any element that accepts flow content `<select>` element
Implicit ARIA role	`separator`
Permitted ARIA roles	`presentation` or `none`
DOM interface	`HTMLHRElement`

Specifications

HTML

<hr> HTML thematic break (horizontal rule) element