<hr>: The 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.
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.
| Content categories | Flow content. | 
|---|---|
| Permitted content | None, it is an empty element. | 
| Tag omission | It must have start tag, but must not have an end tag. | 
| Permitted parents | Any element that accepts flow content. | 
| Implicit ARIA role | separator | 
| Permitted ARIA roles | presentationornone | 
| DOM interface | HTMLHRElement | 
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
<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
Specifications
| Specification | 
|---|
| HTML Standard (HTML) # the-hr-element | 
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
| hr | 1 | 12 | 1 | 5.5 | ≤12.1 | 3 | 1 | 18 | 4 | ≤12.1 | 1 | 1.0 | 
| align | 1 | 12 | 1 | ≤6 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 | 
| color | 33 | 12 | 1 | ≤6 | 20 | 10.1 | 4.4.3 | 33 | 4 | 20 | 10.3 | 2.0 | 
| noshade | 1 | 12 | 1 | ≤6 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 | 
| size | 1 | 12 | 1 | ≤6 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 | 
| width | 1 | 12 | 1 | ≤6 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 | 
See also
    © 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr