Let’s take some time today and discuss this awesome feature in HTML “horizontal line.” First of all, you may need to know if HTML “horizontal line” is a tag or an attribute. You can find more about HTML attributes well explained here. In this case, the HTML horizontal line is a block-level element or, in other words, a tag.
It is used to separate contents within a page or create a break within document sections. What is an element in HTML? Please find the answer and more about the HTML element here.
For example, you have a heading followed by a paragraph. Again a heading and then followed by a paragraph. To have a clear distinction between these two parts, you may want to put a horizontal line in between.
Syntax of the HTML horizontal line
<hr>
It’s normally denoted with an empty tag ‘<hr>’. When we say an empty tag, this simply means that we do not need a closing tag.
HTML horizontal line attributes
As discussed on HTML Attributes, we can add attributes to the <hr> to make it more appealing. Let’s discuss some of the attributes used.
Align attribute
This attribute sets the alignment of the horizontal line on a page. It can either be aligned on the left, right, or center.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML horizontal line</title>
<style type="text/css">
#dimension{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid blue;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="dimension">
<p><b>This is a html horizontal line, aligned to left</b></p>
<hr align="left" width="100px">
<p><b>This is a html horizontal line, aligned to right</b></p>
<hr align="right" width="100px">
<p><b>This is a html horizontal line, aligned to center</b></p>
<hr align="center" width="100px">
</div>
</body>
</html>
Output:
By default, the horizontal line occupies the whole width within the defined page or section. To avoid this so that we can note the difference, we added another attribute width. Let’s go ahead and discuss this attribute.
Attribute width
This attribute specifies the amount of space that the <hr> will occupy horizontally concerning the page or section.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML horizontal line</title>
<style type="text/css">
#dimension{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid blue;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="dimension">
<p><b>This is a html horizontal line,width attribute</b></p>
<hr width="150px">
<hr width="300px">
<hr width="400px">
</div>
</body>
</html>
Size attribute
This attribute specifies the height of horizontal line.
<p><b>This is a html horizontal line,size attribute</b></p> <hr size="5px">
Noshade attribute
This attribute does away with the shading effect on the horizontal line.
<p><b>This is a html horizontal line,size attribute</b></p> <hr noshade>
The other attribute is the color attribute. This will only work with the internet explorer browser. Hence we can only use this attribute when we are sure we will load our page on internet explorer only.
Styling the HTML horizontal line using CSS
We can now add more styles to the horizontal line using the cascaded style sheet to make it more attractive. It’s upon our choice whether to use the internal CSS, inline or external CSS.
Let’s look at a scenario where we will use the border property to style the horizontal line element.
<!DOCTYPE html>
<html>
<head>
<title>HTML horizontal line</title>
<style type="text/css">
#dimension{
width: 500px;
height: 350px;
margin: 0 auto;
border: 1px solid blue;
border-radius: 5px;
}
hr.green{
border: 1px solid green;
}
hr.dashed{
border: 1px dashed red;
}
hr.dotted{
border: 1px dotted red;
}
hr.border_radius{
border: 5px solid blue;
border-radius: 5px
}
</style>
</head>
<body>
<div id="dimension">
<p><b>This is a html horizontal line,border attribute</b></p>
<p>Default</p>
<hr>
<p>Green color</p>
<hr class="green" size="5" >
<p>Dashed</p>
<hr class="dashed" size="5" >
<p>Dotted</p>
<hr class="dotted" size="5" >
<p>Border Radius</p>
<hr class="border_radius" size="5" >
</div>
</body>
</html>
Conclusion
In this tutorial, we have discussed HTML horizontal lines. We can highly use it when we want to display content on the same HTML page but in a distinct manner. The width of this line is 100% by default, and hence we can modify this using the with attribute. The color attribute only works in internet explorer, but that does not limit us in changing the color of the hr. Using CSS, we can modify its color the way we want, not only the color but also other nice features like a border. CSS makes HTML more attractive and fun t work with. Wrapping up, I would recommend you also have a look at the HTML Q tag.
