LAST UPDATED: NOVEMBER 15, 2020
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+
