CSS
HTML for Horizontal Line: The
Tag Explained
Want to visually break up content on a webpage with a simple line? HTML provides a straightforward way to add a horizontal line—also known as a horizontal rule—using a single tag.
In this blog post, you’ll learn:
- ✅ The correct HTML tag for a horizontal line
- 🧪 How to use it with real examples
- 🎨 How to style it with CSS
- 💡 When and why to use horizontal rules
✅ The Correct HTML Tag: <hr>
The <hr>
tag stands for horizontal rule and is used to insert a thematic break in your content.
📌 Syntax:
<hr>
- It is an empty (void) tag—no closing tag is needed
- It creates a horizontal line that spans the width of its container
🧪 Basic Example
<h1>Welcome</h1>
<hr>
<p>This is the first section of the page.</p>
✅ Output: A horizontal line appears between the heading and paragraph.
🎨 Styling the <hr>
with CSS
The default <hr>
style is plain, but you can customize it using CSS.
Example 1: Thicker and Colored Line
<hr style="height: 4px; background-color: #333; border: none;">
Example 2: Dashed Line
hr.dashed {
border: none;
border-top: 2px dashed #aaa;
}
<hr class="dashed">
Example 3: Centered and Shorter Width
hr.short {
width: 50%;
margin: 20px auto;
border-top: 2px solid #000;
}
<hr class="short">
🧠 When Should You Use <hr>
?
Use the <hr>
tag when you want to:
- Separate sections of content
- Indicate a thematic shift (e.g., change of topic)
- Visually divide content in articles, emails, or reports
✨ Tip: In semantic HTML5,
<hr>
represents a thematic break rather than just a decorative line.
❌ Common Mistakes to Avoid
Mistake | Issue |
---|---|
Using <hr></hr> | Incorrect—<hr> is a self-closing tag |
Overusing <hr> | Can make the page feel cluttered |
Relying only on default styling | Style it for better design integration |
✅ Summary
Task | Code Example |
---|---|
Basic horizontal line | <hr> |
Styled line (CSS) | hr { ... } |
Thematic content break | Use <hr> semantically |
🏁 Final Thoughts
The <hr>
tag is a simple yet effective way to add horizontal lines in HTML. Whether you’re separating paragraphs, sections, or topics, this tag brings structure and clarity to your web content. For modern design, pair it with CSS for a more polished look.