When designing a webpage, visual separation between sections of content is often necessary for clarity and user experience. One simple and effective way to do this in HTML is by using a horizontal line.
So, what is the correct HTML for a horizontal line?
The Answer: <hr>
In HTML, the <hr> tag is used to insert a horizontal rule—a thematic break in the content. It visually represents a shift in topic, a section divider, or a transition.
Syntax:
<hr>
Key Features:
- Void element:
<hr>is self-closing and does not need an end tag. - Semantic meaning: It represents a thematic break in HTML5.
- Default style: Most browsers display it as a thin, horizontal line across the width of the container.
Example:
<h2>About Us</h2>
<p>We are a team of creative professionals.</p>
<hr>
<h2>Contact</h2>
<p>Email us at he***@ex*****.com</p>
In the example above, the <hr> tag creates a clear visual break between the “About Us” and “Contact” sections.
Styling the <hr> Tag
Although the default browser style is a plain gray line, you can customize the horizontal line using CSS.
Example with CSS:
<hr style="border: 1px solid #000; width: 50%;">
Or, using an internal stylesheet:
<style>
hr {
border: none;
height: 2px;
background-color: #007BFF;
width: 60%;
margin: 20px auto;
}
</style>
🎨 With CSS, the
<hr>becomes a flexible design element—not just a plain line.
When to Use <hr>
✅ Good for:
- Separating content sections
- Indicating topic changes
- Breaking up long content for readability
❌ Avoid using for layout purposes. Instead, use CSS and semantic HTML structure like <div>, <section>, or <article> for proper layout and content organization.
Conclusion
The <hr> tag is the correct and simplest HTML element for inserting a horizontal line. It’s a semantic element that improves the readability and structure of your webpage. While it works great out of the box, CSS allows you to style it to match your website’s design.
Mastering this basic element helps you build visually organized and professional-looking web pages with ease.
