This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz
The hr element is a paragraph-level break (the “horizontal rule”). It’s used to illustrate a change in a story, article, or transition to a different topic within the same HTML document.
Example
Syntax
1 |
<p>Aliquip officia cillum veniam reprehenderit veniam pariatur anim laboris reprehenderit officia qui cupidatat quis velit eiusmod. Ad irure anim in incididunt non et anim ad labore sit excepteur dolore sit. Excepteur irure ea eiusmod fugiat eu aute voluptate esse tempor eiusmod sunt. Eiusmod adipisicing quis dolore aliquip.</p> |
2 |
|
3 |
<hr>
|
4 |
|
5 |
<p>Incididunt nisi minim deserunt qui irure elit laboris exercitation culpa voluptate culpa nulla. Mollit ea occaecat ullamco ullamco velit ipsum exercitation aute aute sint incididunt non ex non. Irure sit nostrud elit ad excepteur do exercitation do cillum ex culpa do ea minim.</p> |
Result
Browser Support
The hr element is supported in all modern browsers. Read more on caniuse.com.
Attributes
A hr element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).
Additional Attributes:
-
align: Sets the alignment of the rule on the page. If no value is specified, the default value -
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.
Content
The hr element has no content model (i.e. It doesn’t accept content).
What’s the Difference Between <hr /> and <hr>?
HTML hr is a void element, which means it can’t have any content under any circumstances. Void elements have an opening tag, but no closing tag. They can optionally have a forward slash / but thanks to the HTML5 spec the choice to include one is entirely yours!
Other void elements include:
Learn More
hr element does not affect a document’s outline?
This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz
Andy Leverenz | Sciencx (2023-03-20T19:53:58+00:00) HTML Element: hr. Retrieved from https://www.scien.cx/2023/03/20/html-element-hr/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.