HTML <hr/> Tag for a Horizontal Ruled Line

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <hr/> Tag in HTML 5

The <hr/> tag is a standalone HTML tag used to separate content visually using a horizontal rule. It is one of the block tags used to group content in HTML.

The plain old horizontal rule below separates this paragraph

... from this paragraph.

Here are some different styles of horizontal lines

A blue horizontal line with outset border:

An animated red horizontal line:

A horizontal line with inset border and animated green gradient:

These are actual working examples of the <hr/> tag example code below.

<hr/> Tag Syntax

Rules for coding HTML `hr/` elements

<body>
   ...
   ... flow content expected ...
   <hr/>
   ...
</body>

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

To add a horizontal rule, code a hr element where flow content is expected.
Begin the p element with a starting <p> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any HTML global attributes on the <hr> tag as appropriate.
Since the hr element is a void element, the HTML code consists of a standalone <hr/> tag terminated with the self-closing delimiter string />.

<hr/> Content Model

Contents of the hr element

Content: Empty. Any properties are coded using global attributes.

Since the <hr/> tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiters /> rather than just > (<hr/>).

<hr> Tag Attributes

Attributes of the <hr> tag

global attributes

The only attributes that can be coded on the <hr> tag are the common HTML attributes.

<hr> Tag Examples

Examples of the `hr` tag in HTML 5

<hr/> tag styles

(see <hr> tag demo above)

<p>The plain old horizontal rule below separates this paragraph</p>
<hr/>
<p>... from this paragraph.</p>

<h5>Here are some different styles of horizontal lines</h5>

<p>A blue horizontal line with outset border:</p>
<hr style="height: 15px; border: 5px outset #999999; background-color: #0000ff"/>

<p>An animated red horizontal line:</p>
<div>
<style scoped="scoped">
@-webkit-keyframes animated-width {
   from {
      width: 100%;
   }
   to {
      width: 5%;
   }
}
hr.animated-width {
   height: 6px;
   border: 0;
   text-align: center;
   background-color: #ff0000;
   -webkit-animation-name: animated-width;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-duration: 1.0s;
   -webkit-animation-timing-function: ease-out;
}
</style>
<hr class="animated-width"/>
</div>

<p>A horizontal line with inset border and animated green gradient:</p>
<div>
<style scoped="scoped">
@-webkit-keyframes animated-gradient {
   from {
      background: -webkit-gradient(linear, left top, right bottom, from(#00ff00), to(#003300));
   }
   to {
      background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#00ff00));
   }
}
hr.animated-gradient {
   height: 28px;
   border: 7px inset #999999;
   text-align: center;
   background-color: #009900;
   background: -moz-linear-gradient(left top, #00ff00, #003300);
   background: -webkit-gradient(linear, left top, right bottom, from(#00ff00), to(#003300));
   -webkit-animation-name: animated-gradient;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-duration: 1.0s;
   -webkit-animation-timing-function: ease-in-out;
}
</style>
<hr class="animated-gradient"/>
</div>

Changes in HTML 5 - <hr> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <hr/> tag because they either have been deprecated or were never officially supported:

align
noshade
size
width

In ployglot HTML documents the <hr/> tag is coded as a self-closing tag the same as in the 2000-2010 Recommendations from the W3C HTML Working Group. Those specifications changed the ending delimiter to /> from > in older recommendations. They also defined the HTML namespace for the hr element type name and the names of other HTML element types.

Valid HTML 5