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.
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 |
presentation or none
|
| DOM interface | HTMLHRElement |
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 Non-standard Deprecated
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.
<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>
| Specification |
|---|
| HTML Standard # the-hr-element |
| 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 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
align |
1 |
12 |
1 |
≤6 |
≤12.1 |
≤4 |
4.4 |
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 |
4.4 |
18 |
4 |
≤12.1 |
≤3 |
1.0 |
size |
1 |
12 |
1 |
≤6 |
≤12.1 |
≤4 |
4.4 |
18 |
4 |
≤12.1 |
≤3 |
1.0 |
width |
1 |
12 |
1 |
≤6 |
≤12.1 |
≤4 |
4.4 |
18 |
4 |
≤12.1 |
≤3 |
1.0 |
© 2005–2022 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