You can use the HTML <hr>
tag to separate out different topics on a page.
We often use this tag when we want to create a thematic break or separate items on an HTML page.
In this article, you'll learn how to use this tag in your HTML code.
Table of Contents
- Basic Syntax
- Attributes of
<hr />
Tag - The Width Attribute
- The Color Attribute
- The Size Attribute
- The Align Attribute
- Conclusion
Basic Syntax
The <hr>
tag is an empty element. This means that it only has an opening tag, <hr>
.
Starting in HTML5, we now need to attach a slash to the tag of an empty element. So, instead of having just <hr>
, you should make it <hr />
.
In browsers, the <hr />
tag is displayed as a horizontal rule or line, like this:
Attributes of <hr />
Tag
The <hr />
tag accepts attributes such as width
, color
, size
, and align
.
Before showing you how the individual attributes look and work, I will be setting everything in the body to center with this CSS code:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
The Width Attribute
The width
attribute is used for specifying a width for the <hr />
tag. It takes pixels or percentage as a value.
<hr width="50%" />
The Color Attribute
The color
attribute is used to specify a color for the <hr />
tag.
<hr width="50%" color="green" />
Here is how it would look if we set a green color for the <hr />
tag:
The Size Attribute
You can define a height for the <hr />
tag with the size
attribute. The value must be set in pixels.
<hr width="50%" color="green" size="50px" />
A height of 50px
looks like the screenshot below:
The Align Attribute
The align
attribute is used to set an alignment for the <hr />
tag. It takes left
, center
and right
values.
The default is left – meaning if an alignment is not set, the <hr />
tag automatically aligns to the left.
<hr width="50%" color="green" size="50px" align="right" />
Setting an alignment of right
for the <hr />
tag looks like this:
Conclusion
This article shows you what the <hr />
tag looks like, what it is used for, and the attributes it accepts.
Since the <hr />
tag appears as a horizontal rule in browsers, you might be thinking of using it to draw a line.
But you shouldn’t do this because the horizontal rule appears as is only presentationally, not semantically. Instead, you should draw a line with a div
or span
as the case may be.
If you find this article helpful, share it with your friends and family.