The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with 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. |
| Permitted ARIA roles | presentation |
| 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
<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>
Above HTML will output:
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.
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.
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of '<hr>' in that specification. |
Living Standard | Definition of the hr element |
| HTML Living Standard | Living Standard | Suggested default rendering of the hr element |
| HTML5 The definition of '<hr>' in that specification. |
Recommendation | |
| HTML 4.01 Specification The definition of '<hr>' in that specification. |
Recommendation | The align, noshade, size and width attributes are deprecated |
Browser compatibility
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | 1 | Yes | Yes | Yes |
align | Yes | Yes | 1 | Yes | Yes | Yes |
color | Yes | Yes | 1 | Yes | Yes | Yes |
noshade | Yes | Yes | 1 | Yes | Yes | Yes |
size | Yes | Yes | 1 | Yes | Yes | Yes |
width | Yes | Yes | 1 | Yes | Yes | Yes |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
align | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
color | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
noshade | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
size | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
width | Yes | Yes | Yes | 4 | Yes | Yes | Yes |