HTML <hr> Tag

What You’ll Learn

By the end of this tutorial, you’ll use <hr> correctly for thematic breaks and style horizontal rules with modern CSS.

The HTML <hr> tag creates a horizontal rule that separates content. In HTML5 it represents a thematic break — not just a decorative line.

What Is the <hr> Tag?

The horizontal rule element (<hr>) produces a line across the page and indicates a thematic break between paragraph-level elements. Browsers render it as a horizontal divider by default, but its HTML5 meaning is semantic: a shift in topic or scene.

hr is a void element — it cannot contain text or child elements and does not use a closing tag in HTML syntax.

📝 Syntax

Insert <hr> where you want a thematic break between blocks of content:

<p>First topic paragraph.</p>

<hr>

<p>Second topic paragraph.</p>

Syntax Rules

• hr is a void element — no closing tag in HTML.
• XHTML-style <hr /> is also valid but optional in HTML5.
• Place between flow content (paragraphs, sections) where a topic shift occurs.
• Style with CSS classes — avoid obsolete presentational attributes.

⚖️ <hr> vs <br>

Both affect layout but serve different purposes:

⚖️ <hr> vs CSS border

When to use each approach:

Examples Gallery

Basic horizontal rules, section separation, thematic breaks, and CSS styling with live previews.

<hr class="custom">



<!-- CSS -->

hr.custom {

  border: none;

  border-top: 3px solid #1d4ed8;

  margin: 1.25rem 0;

}

<section>

  <h2>Section 1</h2>

  <p>Content for section 1...</p>

  <hr>

</section>

<section>

  <h2>Section 2</h2>

  <p>Content for section 2...</p>

</section>

<p>Introduction to a topic...</p>

<hr>

<p>Exploring the main points...</p>

♿ Accessibility

Use hr thoughtfully for semantic breaks:

• Use for thematic shifts — when content genuinely changes topic, not for every visual divider.
• Do not overuse — too many horizontal rules create noise for screen reader users.
• Prefer headings for structure — use h2 and section when organizing major page regions.
• Pure decoration — use CSS borders on containers instead of empty semantic breaks.

💡 Best Practices