Menu

HTML hr Tag

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.

AttributesDescription
classThis attribute defines the name of the class
langThis attribute defines the language for the Rule.
idThis attribute is used to define the id
titleThis attribute provides extra information about the element
styleThis attribute is used to provide the inline CSS styling
dirThis 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:

<!doctype html>
<htmL>
    <head>
        <title>
            HR - Horizontal Rule
        </title>
    </head>
    <body>
        <div>The first line</div>
        <hr/>
        <div>The second line</div>
        <hr size="20" style="background-color:orange"/>
        <div>The Third Line</div>
    </body>
</htmL>

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+