HTML Horizontal Line – Learn How to Use the hr Tag in HTML
Have you ever wondered how to add a visual break between web page sections? The <hr> tag in HTML creates a horizontal line, helping to separate content and improve readability. It's a quick and easy way to organize your page layout. Let's understand more!
While working on web pages, you may want to add a horizontal line to indicate a thematic change between different sections. To create a horizontal line in HTML, you will need to use the HTML hr tag. HR is a block-level element that moves all the elements after it to another line. This article will show you how to insert a line in an HTML document using an HTML horizontal line.
Must read Mastering HTML Layout: A Comprehensive Guide to HTML and CSS Techniques
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
Table of Content
- HTML Horizontal Line Overview
- Why <hr> Tag is Important?
- When to Use the HTML HR Tag?
- Example of HTML <hr> Tag
- HTML <hr> Tag Attributes in HTML 4
- <hr> Tag Styling in HTML 5
- Styling the <hr> Tag With CSS Border Property
HTML Horizontal Line – What is an HTML hr tag?
In HTML, <hr> tag stands for horizontal rule. HR is an HTML tag that enables us to add a horizontal rule or a thematic break to an HTML page. Using the <hr> tag, we can divide document sections.
The <hr> tag is an empty tag. It means that it does not require an end tag. So, you need to type <hr> to add a horizontal line to an HTML page.
Syntax of HTML <hr> tag
<hr>
Why <hr> Tag is Important?
It is a good practice to insert HR elements or horizontal lines to your web pages as it helps in adding visual value to the page layouts. In the versions earlier than HTML5, the <hr> tag was used for presentational purposes. From HTML5, this tag provides semantic meaning to a page’s layout. We can customize it using CSS and add a variety of layout effects.
Explore Popular HTML Courses Online
When to Use the HTML HR Tag?
You can use the <hr> tag in HTML if you want to:
- Create a thematic break.
- Separate different topics on a page.
Example of HTML <hr> Tag
Here is an example to show the use of <hr> tag in HTML:
<!DOCTYPE html> <html><head> <title>Horizontal Line Tag</title></head> <body><p> This is an example of horizontal rule. It is used below this paragraph</p> <hr> <p>We have used the horizontal rule above this paragraph.</p> </body> </html>
Output
HTML <hr> Tag Attributes in HTML 4
Below are some attributes of the HTML <hr> tag in HTML 4. These attributes are not supported in HTML5.
| Attribute | Value | Description |
| align | left | center | right | It sets the alignment of the horizontal rule. |
| width | pixels or percentage | To specify the width of the rule. |
| size | pixels or percentage | It specifies the height of the horizontal line. |
| noshade | noshade | It defines the bar without a shading effect. |
| color | color | To set the color of the horizontal rule through the color name or hex value. |
HTML <hr> Tag Styling in HTML 5
In HTML5, we use the CSS property to style the horizontal rule. Below are some examples:
HTML <hr> Tag Width Using CSS Property
Below is an example of styling the HTML <hr> tag with width property
<!DOCTYPE html><html> <head> <title> HR Tag Width</title> <style> hr { width: 100px; } </style> </head> <body> <p>Example of a horizontal rule with 100 pixels width.</p> <hr> </body></html>
Output
HTML <hr> Tag Height Using CSS Property
Here is an example of styling the HTML <hr> tag with height property
<!DOCTYPE html><html> <head> <title>HR Tag Height </title> <style> hr { height: 50px; } </style> </head> <body> <p>Example of a horizontal rule with 50 pixels height.</p> <hr> </body></html>
Output
HTML <hr> Tag Align Using CSS Property
Example of styling the HTML <hr> tag with the text-align property
<!DOCTYPE html><html> <head> <title>HR Tag Align</title> <style> hr { width: 50%; text-align: left; margin-left: 0; } </style> </head> <body> <p> Example of a horizontal rule with CSS text-align property</p> <hr> </body></html>
Output:
HTML <hr> Tag Border Using CSS Property
We can achieve the noshade effect in an HTML horizontal line with the CSS border property.
Example of styling the HTML <hr> tag with the border property
<!DOCTYPE html><html> <head> <title>HR Tag Border</title> <style> hr { border: 1px solid #000000; } </style> </head> <body> <p>Example of a horizontal rule with CSS border Property.</p> <hr> </body></html>
Output:
Styling the <hr> Tag With CSS Border Property
Below is an example of styling the HTML <hr> tag with the CSS border property
<!DOCTYPE html><html> <head> <title>HR Tag Styling</title> <style> /* Default HR style */ hr { border-top: 2px solid black; }
/* Red border */ hr.one { border-top: 1px solid #fa1920; }
/* Dotted blue border */ hr.two { border-top: 1px dotted #1c87c9; }
/* Dashed green border */ hr.three { border-top: 1px dashed #007810; }
/* Large rounded yellow border */ hr.four { border: 20px solid #f1fa41; border-radius: 5px; } </style> </head> <body> <p>The following is a normal HR tag.</p> <hr> <p>Below are some Styled HR Tags.</p> <hr class="one"> <hr class="two"> <hr class="three"> <hr class="four"> </body></html>
Output
Conclusion
In this blog, we learned how to add the HTML <hr> tag to web pages and explored how the HTML Horizontal line element provides semantic meaning to a page’s layout. Through this tutorial, we hope you can add horizontal lines with attractive styles to create exciting layout effects on your web pages.
FAQs
Is the HR tag supported in HTML5?
Yes, HTML 5 supports the hr tag. However, it does not support the hr tag attributes.
Are HTML HR element attributes deprecated in HTML5?
Yes, in HTML5, the attributes of the HR tag, including align, size, width, and noshade are deprecated. You can use CSS to style the element on your HTML web pages.
What is the difference between BR and HR tags in HTML?
In HTML, the tag enables us to insert a line break. Using this tag, the text following the tag moves to the next line. On the other hand, the tag enables us to add a horizontal line that divides the document into sections.
Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio
Top Picks & New Arrivals
