The <hr> tag in HTML stands for horizontal rule and in HTML5, the <hr> tag represents a paragraph-level thematic break of an HTML page, whether text or not, maybe employed new label: <hr>. The HTML <hr> tag name comes from the English Horizontal Rule (horizontal line). This label formed by a single instruction (empty tag) and causes the browser to insert a horizontal line it separating the two paragraphs that compared. Four attributes allow changing its appearance. These are:
We’ll be covering the following topics in this tutorial:
Specific Attributes
The <hr> tag in HTML supports following additional attributes
| Attribute | Value | Description |
| ‘align’ | left center right | The HTML <hr> align Attribute Change the alignment of the horizontal line. It can take three values: “left”, “center” and “right” to get left-aligned, center and right respectively. |
| ‘noshade’ | noshade | The HTML <hr> noshade Attribute is the boolean value and in English means no shadow exists because some browsers graphics as Navigator or Explorer shown with horizontal lines shaded three-dimensional effect. By including this attribute eliminates this effect so that the browser will only display a solid horizontal line instead of shaded lines. |
| ‘size’ | pixels | The HTML <hr> size attribute use to control the line thickness. As the value of this attribute is must specify the desired value in pixels (screen dots). |
| ‘width’ | pixels | The HTML <hr> width attribute use to specify the horizontal line width. The value can give an absolute manner, specifying the width in pixels (e.g. width = 100) or made relative to the width of the browser window using percentages (e.g. width = “90%”). It highly recommended using the latter system, so we get a relevant result regardless of the size each user wants to give the browser window. |
These attributes can be used together to combine their effects. In Our example we can see the effect each one separately in Explorer along with the values used in each case.
<html>
<head>
<title>Horizontal Line </title>
</head>
<body>
Line of width 150 and size 3
<hr width="150" size='3">
Line center aligned, width=50% and noshade
<hr align="center" width="50%" noshade>
Line right aligned, size = 4, colour Red and having no shade
<hr align="right" size="4" color="red" noshade>
</body>
</html>
Browser Support
| Chrome | Firefox | IE | Opera | Safari | Android |
| Yes | Yes | Yes | Yes | Yes | Yes |
How do I add color to an HTML <hr> tag
It is possible to use the CSS background-color property in conjunction with the height and border to alter the default colour a <hr> tag.
In the next example, we have changed the colour of the <hr> tag to grey. You might even increase the thickness of the line by simply raising the value of the height property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change the Color of <hr> Tag</title>
<style>
hr{ height: 1px; background-color: #ccc; border: none;}
</style>
</head>
<body>
<p>The color to an HTML <hr> tag</p>
<hr>
<p>The <hr> tag in HTML</p>
</body>
</html>
How do I make HR thicker in HTML?
If you would like to alter the height or thickness of your horizontal line, add the height property into your <hr> style. It is possible even to set the background-color property to your thick horizontal line.
How do I turn off the HR tag?
No. <hr /> should not have a closing tag. It is invalid HTML.
Which attribute does not come in HR tag?
Thickness is an attribute which does not come with an HR tag which displays the thickness.
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular