HTML5 <hr> Tag

The HTML <hr> tag is used to represent a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

The <hr> tag is an empty element and no other content is permitted inside it. This element requires a start tag. However, there must not be an end tag. The parent of the <hr> tag can be any element that accepts flow content.

There is no need for an <hr> element between the <section> elements, since they along with the <h1> elements imply thematic changes themselves.

The following style is applied to this element by default:

hr {
  display: block;
  margin-before: 0.5em;
  margin-after: 0.5em;
  margin-start: auto;
  margin-end: auto;
  border-style: inset;
  border-width: 1px;

Here is an example of using this tag:

<p>Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwealth could be appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was comforting enough to get him through the rest of the night's shift.</p>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond's winters.</p>


This element only accepts global attributes.


See the Pen HTML hr Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <hr> element on MDN.
  2. You can also read the HTML <hr> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

Go To Top