Connect with us

CSS

HTML for Horizontal Line: The
Tag Explained

Spread the love

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

MistakeIssue
Using <hr></hr>Incorrect—<hr> is a self-closing tag
Overusing <hr>Can make the page feel cluttered
Relying only on default stylingStyle it for better design integration

✅ Summary

TaskCode Example
Basic horizontal line<hr>
Styled line (CSS)hr { ... }
Thematic content breakUse <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.


Spread the love
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *