Hurry! Try our new Interactive Courses for FREE. 🥳   🚀
  Signup/Sign In

HTML hr Tag

The HTML <hr> tag is used to represent a Horizontal Rule or in simple words to draw a horizontal line to divide the content displayed on a webpage into sections.

For example, you put a heading, then a paragraph, and then before starting the next heading you want to add a horizontal line to have a clear distinction between the two headings, in such a case you can use the HTML <hr> tag.

  • Horizontal Rule is used to drawing horizontal lines across the browser window.
  • It is used to divide an HTML page into different sections.

  • It does not contain any content in it, because it is an empty tag.

  • Horizontal rules are also used as a separator between the content of an HTML page.

  • This is a block-level element.

HTML <hr> Tag - Syntax and Usage

The <hr> tag does not require an ending tag, thus it is an empty tag. Following is the syntax for the same:

<hr/>
<!-- or -->
<hr>

In HTML tags which are empty, its not necesary to put the forward slash before the closing angle bracket.

HTML <hr> Tag Attributes

HTML <hr> tag supports both Global attributes and Event attributes and some of the common attributes are given below.

Attributes Description
class This attribute defines the name of the class
lang This attribute defines the language for the Rule.
id This attribute is used to define the id
title This attribute provides extra information about the element
style This attribute is used to provide the inline CSS styling
dir This attribute is used to define the direction of the horizontal rule. It can be either from left to right or from right to left, although that would not make much difference, as a line looks the same from either side.

HTML <hr> Tag Basic Example

Below we have a basic example for a clear understanding of the <hr> tag:

In the code example above, we have also shown how you can add some styling to the <hr> tag to modify the look of the horizontal rule.

Default CSS Settings for HTML <hr> Tag

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

Browser Support for HTML <hr> Tag

Following browsers support this attribute:

  • Firefox 1+

  • Google Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 4+