What is the HR Tag in HTML Used for?

The <hr> tag in HTML is used for separating the individual sections of a webpage from each other by adding a horizontal line between them. More precisely, it is used for adding a thematic break between the contents of a webpage. It is a self-closing tag in HTML.

Syntax of HR Tag in HTML

Therefore, it is used for adding a horizontal line after you abruptly change a topic in your webpage or separate individual topics from each other.

You can style this horizontal line using different attributes which are discussed later in this article. It is a block-level element that is, it moves all the contents after it to the next line.

You can refer to the article HR Tag in HTML for more information. It is a self-closing tag therefore, its syntax requires only the tag itself. The content is written above and below it.

Example of HR tag in HTML

Output:

HTML HR Tag Attributes

The HR tag accepts many attributes so that the horizontal line could be designed beautifully to make the user experience better. It accepts the attributes such as WIDTH, ALIGN, COLOR, NOSHADE, and SIZE. Let us see how we use them individually with the HR tag to style our HTML page.

The WIDTH Attribute

The WIDTH attribute is used to increase or decrease the width of the horizontal line. The WIDTH attribute can be expressed in pixels or percentages. These percentages are relative to their parent element. For example, if the parent's width is 300px then 50% would become 150px.

Let us see an example for using the WIDTH attribute with the HR tag in HTML:

Output:

Therefore, the <hr> tag is used for creating horizontal lines of various widths according to our needs. However, by default, the horizontal line attains the full width of the page.

The COLOR Attribute

The COLOR attribute is used to change the color of the horizontal line in HTML. You can specify the color either using the color name or using the Hex-code or by using the RGB-values of the color. However, by default, the horizontal line is black.

Let us look into an example to understand it:

Output:

Therefore, the <hr> tag is used for creating the horizontal lines of various colors according to our needs for design.

The SIZE Attribute

The SIZE attribute is used to increase or decrease the thickness or the height of the horizontal line in HTML. It can be specified only in pixels.

Let us understand it with an example:

Output:

Therefore, the <hr> tag is used for creating horizontal lines of various sizes according to our needs.

The ALIGN Attribute

The ALIGN attribute is used to align the horizontal line to the left, right, or center of the HTML page. However, if the width of the horizontal line is 100% then the ALIGN attribute would cause no difference to the horizontal line.

Let us understand it with an example:

Output:

Therefore, the <hr> tag is used for aligning the horizontal lines to the left, right, or center according to our needs.

The NOSHADE Attribute

The NOSHADE attribute is used to remove the shadow that appears below the horizontal line in an HTML page. It is a boolean attribute which means that if it is written with the HR tag then a solid horizontal line will be displayed otherwise a shaded line would be displayed on the HTML page.

Let us understand it better using an example:

Output:

In the above output, the first and third is a solid horizontal lines whereas the second and the fourth are shaded horizontal lines.

Therefore, the HR tag is used for creating shaded and unshaded lines according to our needs.

Browser Support

The HR tag is supported by the following browsers -

• Google Chrome
• Firefox
• Opera
• Safari
• Microsoft Edge