When we create an HTML web page, we need clear visual separation between sections. That’s where the HR tag in HTML comes into use, or we can say in simple words, to draw a horizontal line on a web page to divide the sections displayed on a webpage. It helps us to divide content and improve readability without adding complex design elements.
In this guide, we will learn what the HR tag in HTML is, how to use it, its syntax, attributes, and practical examples.
What is an HR Tag in HTML?
The HR tag in HTML stands for Horizontal Rule. It creates a horizontal line across the webpage or where we put it into the source code of a webpage.
However, it is more than just a line. It represents a thematic break between content sections. For example, you can use it to separate topics, sections, or ideas in your content.
In simple words, it acts like a visual divider, and it looks like a single border line.
Syntax of HR Tag in HTML
The syntax of the HR tag is very simple.
<hr>
This is a self-closing tag, which means it does not require a closing tag. It comes into the void element in HTML also because it does not require a closing tag.
Basic Example of HR Tag
Here is a simple example to understand how it works:
<p>This is the first section of content.</p>
<hr>
<p>This is the second section of content.</p>
In this example, the horizontal line separates two sections of content, making it easier to read.
Attributes of HR Tag in HTML
The HR tag supports both global attributes and some styling options.
1. Style Attribute (Most Common)
You can customize the appearance of the line using CSS.
<hr style="border: 2px solid black;">
2. Width Attribute (Using CSS)
<hr style="width:50%;">
This sets the width of the horizontal line.
3. Color (Using CSS)
<hr style="border-color: blue;">
4. Height / Thickness
<hr style="height: 4px; background-color: black; border: none;">
Modern HTML prefers CSS styling instead of old attributes like color, size, and width.
How to Style HR Tag with CSS
Instead of inline styles, you can also use CSS for better control.
<hr class="custom-line">
.custom-line {
border: none;
height: 3px;
background-color: #333;
margin: 20px 0;
}
This approach keeps your code clean and reusable.
When Should We Use HR Tag
You should use the HR tag in HTML in the following cases:
- To separate sections of content
- To break down different topics in a blog post
- To improve readability
- To visually organize long pages
However, do not overuse it. Too many lines can make your design look cluttered.
Best Practices for Using HR Tag
To get the best results, follow these tips:
- ✅ Use it only when needed
- ✅ Combine it with CSS for better design
- ✅ Maintain consistent spacing
- ❌ Avoid using it for decoration only
- ❌ Do not replace proper headings with HR tags
Common Mistakes to Avoid
Here are some mistakes beginners often make:
- Using outdated HTML attributes
- Overusing <hr> multiple times
- Not styling it properly
- Using it instead of a proper semantic structure
Bottom Line
The HR tag in HTML is a simple yet powerful void element. It helps you create clear content separation and improves the overall user experience.
By using proper syntax, CSS styling, and best practices, you can make your web pages more organized and visually appealing.
Start using the HR tag effectively to enhance your content structure today.
FAQs
1. Is the HR tag self-closing?
Yes, the <hr> tag is self-closing and does not need an end tag.
2. Can I style the HR tag?
Yes, you can style it using CSS for color, width, height, and spacing.
3. Is the HR tag still used in modern HTML?
Yes, it is still used to represent thematic breaks in content.
4. What is the difference between HR and BR tags?
<hr> creates a horizontal line (section break) while <br> creates a line break (new line)
Read Also – How to Center an Image in HTML
