HTML Horizontal Line – Learn How to Use the hr Tag in HTML

HTML Horizontal Line – Learn How to Use the hr Tag in HTML

4 mins read14.5K Views Comment
clickHere
Esha
Esha Gupta
Associate Senior Executive
Updated on Nov 22, 2023 12:42 IST

This tutorial explains the HTML hr tag and its styling with syntax and examples to create thematic line breaks in HTML documents.

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

Table of Content

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>
Copy code

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>
Copy code

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>
Copy code

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>
Copy code

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>
Copy code

Output:

 

HTML Underline Tag – Understand u Tag with Examples
HTML Underline Tag – Understand u Tag with Examples
This blog explains the u tag to underline text in HTML. You will also understand when to use the underline tag.
Learn How to Write HTML Comments
Learn How to Write HTML Comments
Have you ever wondered how developers leave notes or disable parts of HTML code without affecting the webpage? This is done using HTML comments. Let us understand more! Learn what...read more
Basic Structure of an HTML Document
Basic Structure of an HTML Document
In this blog, you will learn how an HTML page is structured. We will cover the essential elements required to create an HTML document.

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>
Copy code

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. We hope, through this tutorial, you will be able to add horizontal lines with attractive styles to create exciting layout effects on your web pages.

To learn more about different HTML elements, read our blog – Understanding HTML Elements With Examples.

Recently completed any professional course/certification from the market? Tell us what liked or disliked in the course for more curated content.

Click here to submit its review.

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.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer with a focus on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself ... Read Full Bio

Comments