Scroll to top
Read Time: 2 min

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.



<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>
<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>


Browser Support

The hr element is supported in all modern browsers. Read more on


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.


The hr element is a void element, which means it supports no content model and you can’t pass it any type of content.

Here’s a list of all void elements:

  • input
  • keygen
  • link
  • meta
  • param
  • source
  • track
  • wbr

What’s the Difference Between <hr /> and <hr>?

As mentioned, 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!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.