How to add a horizontal line in HTML
problem
You’re learning HTML and wish to add a horizontal line in your page.
SOLUTION
Using the <hr> tag. The thematic break (horizontal rule) element.
For example we have two paragraphs of text and we wish to place a line between them.
<p>First paragraph</p>
<hr/>
<p>Second paragraph</p>
output
Change the color
By default the line color is black. We can change it by setting the color attribute. For example let’s make it green
<p>First paragraph</p>
<hr color="green"/>
<p>Second paragraph</p>
output
Change the size
We can change the size (height), how thick it is by setting the size attribute. For example:
<p>First paragraph</p>
<hr color="green" size="5px"/>
<p>Second paragraph</p>
output
For the size attribute we use pixels.
Change the width
We can change the width of the line by setting the width attribute. This attribute accepts both pixels and a percentage as value. The percentage corresponds to the current screen’s width. For example, let’s make the line span 50% of the screen.
<p>First paragraph</p>
<hr color="green" size="5px" width="50%"/>
<p>Second paragraph</p>
output
As we can see the line is 50% width and it appears in the center.
Aligning the line
By default the line is aligned to the left of the page. We can change it by setting the align attribute and a value of “left, right, center”. In this case we can set it to the right. For example:
<p>First paragraph</p>
<hr color="green" size="5px" width="50%" align="right"/>
<p>Second paragraph</p>
output
Change the alignment with JavaScript (advanced)
We can change the alignment dynamically with Javascript code. In combination with a timer we can keep changing the alignment from left to center, from center to right, from right to left and repeat. For example:
<script type="text/javascript">
function realign(pos){
let line = document.getElementsByTagName("hr")[0];
if(pos=="center"){
line.setAttribute("align","right");
setTimeout(function(){
realign('right');
},1500);
}
if(pos=="right"){
line.setAttribute("align","left");
setTimeout(function(){
realign('left');
},1500);
}
if(pos=="left"){
line.setAttribute("align","center");
setTimeout(function(){
realign('center');
},1500);
}
}
</script>
output
Just for fun.
The complete code
<html>
<body onload="realign('center')">
<p>First paragraph</p>
<hr color=”green” size='5px' width='50%' />
<p>Second paragraph</p>
</body>
<script type="text/javascript">
function realign(pos){
let line = document.getElementsByTagName("hr")[0];
if(pos=="center"){
line.setAttribute("align","right");
setTimeout(function(){
realign('right');
},1500);
}
if(pos=="right"){
line.setAttribute("align","left");
setTimeout(function(){
realign('left');
},1500);
}
if(pos=="left"){
line.setAttribute("align","center");
setTimeout(function(){
realign('center');
},1500);
}
}
</script>
</html>
conclusion
In this post we saw how to use the <hr> tag and change its color, size, width and alignment. We also saw a piece of javascript that interacts with the line and changes its alignment.
References
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
Share it!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪