<hr> - Thematic Break (Horizontal Rule)

The `<hr>` Element

Block-level Self-closing HTML 1.0

The <hr> element represents a thematic break between content sections. It’s traditionally rendered as a horizontal line but semantically indicates a shift in topic or scene within a document.

Quick Example

<p>First section of content goes here.</p>

<hr>

<p>New section with a different topic starts here.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>First section of content goes here.</p>

<hr>

<p>New section with a different topic starts here.</p>

Syntax

<!-- HTML5 style (recommended) -->
<hr>

<!-- XHTML style (also valid) -->
<hr />

The <hr> element is self-closing and doesn’t require a closing tag.

Attributes

The <hr> element supports all global attributes like id, class, and style.

<hr class="section-divider" id="break-1">

Common Use Cases

Section Separator

<article>
<h2>Introduction</h2>
<p>This article covers the basics of HTML...</p>

<hr>

<h2>Main Content</h2>
<p>Now let's dive into the details...</p>

<hr>

<h2>Conclusion</h2>
<p>In summary, we learned...</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h2>Introduction</h2>
<p>This article covers the basics of HTML...</p>

<hr>

<h2>Main Content</h2>
<p>Now let's dive into the details...</p>

<hr>

<h2>Conclusion</h2>
<p>In summary, we learned...</p>
</article>

Scene Change in Stories

<article>
<p>The detective examined the evidence carefully. Something didn't add up.</p>

<hr>

<p>Meanwhile, across town, the suspect was planning their escape.</p>

<hr>

<p>Back at headquarters, the captain reviewed the case files.</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p>The detective examined the evidence carefully. Something didn't add up.</p>

<hr>

<p>Meanwhile, across town, the suspect was planning their escape.</p>

<hr>

<p>Back at headquarters, the captain reviewed the case files.</p>
</article>

<div class="blog-post">
<h1>Understanding HTML Elements</h1>
<p>Published: December 11, 2025</p>

<hr>

<p>HTML elements are the building blocks of web pages...</p>

<hr>

<div class="post-meta">
  <p>Tags: HTML, Web Development, Tutorial</p>
</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="blog-post">
<h1>Understanding HTML Elements</h1>
<p>Published: December 11, 2025</p>

<hr>

<p>HTML elements are the building blocks of web pages...</p>

<hr>

<div class="post-meta">
  <p>Tags: HTML, Web Development, Tutorial</p>
</div>
</div>

Form Sections

<form>
<h3>Personal Information</h3>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">

<hr>

<h3>Shipping Address</h3>
<input type="text" placeholder="Street Address">
<input type="text" placeholder="City">

<hr>

<button type="submit">Submit</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<h3>Personal Information</h3>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">

<hr>

<h3>Shipping Address</h3>
<input type="text" placeholder="Street Address">
<input type="text" placeholder="City">

<hr>

<button type="submit">Submit</button>
</form>

Styling the HR Element

Basic Styling

<style>
.styled-hr {
  border: none;
  border-top: 2px solid #3b82f6;
  margin: 2rem 0;
}
</style>

<p>Content above the line.</p>
<hr class="styled-hr">
<p>Content below the line.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.styled-hr {
  border: none;
  border-top: 2px solid #3b82f6;
  margin: 2rem 0;
}
</style>

<p>Content above the line.</p>
<hr class="styled-hr">
<p>Content below the line.</p>

Dotted Line

<style>
.dotted {
  border: none;
  border-top: 3px dotted #6b7280;
  margin: 1.5rem 0;
}
</style>

<p>First section.</p>
<hr class="dotted">
<p>Second section.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.dotted {
  border: none;
  border-top: 3px dotted #6b7280;
  margin: 1.5rem 0;
}
</style>

<p>First section.</p>
<hr class="dotted">
<p>Second section.</p>

Dashed Line

<style>
.dashed {
  border: none;
  border-top: 2px dashed #9ca3af;
  margin: 1.5rem 0;
}
</style>

<p>Part one of the content.</p>
<hr class="dashed">
<p>Part two of the content.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.dashed {
  border: none;
  border-top: 2px dashed #9ca3af;
  margin: 1.5rem 0;
}
</style>

<p>Part one of the content.</p>
<hr class="dashed">
<p>Part two of the content.</p>

Gradient Line

<style>
.gradient {
  height: 3px;
  border: none;
  background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
  margin: 2rem 0;
}
</style>

<p>Beautiful gradient separator.</p>
<hr class="gradient">
<p>More content below.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.gradient {
  height: 3px;
  border: none;
  background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
  margin: 2rem 0;
}
</style>

<p>Beautiful gradient separator.</p>
<hr class="gradient">
<p>More content below.</p>

Centered Short Line

<style>
.short {
  border: none;
  border-top: 3px solid #3b82f6;
  width: 100px;
  margin: 2rem auto;
}
</style>

<p style="text-align: center;">Centered content above.</p>
<hr class="short">
<p style="text-align: center;">Centered content below.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.short {
  border: none;
  border-top: 3px solid #3b82f6;
  width: 100px;
  margin: 2rem auto;
}
</style>

<p style="text-align: center;">Centered content above.</p>
<hr class="short">
<p style="text-align: center;">Centered content below.</p>

Shadow Effect

<style>
.shadow {
  border: none;
  height: 2px;
  background: #d1d5db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 2rem 0;
}
</style>

<p>Content with shadowed divider.</p>
<hr class="shadow">
<p>Next section.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.shadow {
  border: none;
  height: 2px;
  background: #d1d5db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 2rem 0;
}
</style>

<p>Content with shadowed divider.</p>
<hr class="shadow">
<p>Next section.</p>

Decorative Style

<style>
.decorative {
  border: none;
  height: 1px;
  background: #e5e7eb;
  position: relative;
  margin: 2rem 0;
}
.decorative::after {
  content: "❖";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 0 1rem;
  color: #9ca3af;
}
</style>

<p>Section one.</p>
<hr class="decorative">
<p>Section two.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.decorative {
  border: none;
  height: 1px;
  background: #e5e7eb;
  position: relative;
  margin: 2rem 0;
}
.decorative::after {
  content: "❖";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 0 1rem;
  color: #9ca3af;
}
</style>

<p>Section one.</p>
<hr class="decorative">
<p>Section two.</p>

Thick Bold Line

<style>
.thick {
  border: none;
  border-top: 5px solid #1f2937;
  margin: 2rem 0;
}
</style>

<h2>Chapter One</h2>
<p>The story begins...</p>
<hr class="thick">
<h2>Chapter Two</h2>
<p>The adventure continues...</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.thick {
  border: none;
  border-top: 5px solid #1f2937;
  margin: 2rem 0;
}
</style>

<h2>Chapter One</h2>
<p>The story begins...</p>
<hr class="thick">
<h2>Chapter Two</h2>
<p>The adventure continues...</p>

Semantic Meaning

<section>
  <h2>Topic A</h2>
  <p>Content about topic A...</p>

  <hr> <!-- Thematic shift -->

  <h2>Topic B</h2>
  <p>Content about topic B...</p>
</section>

<!-- Don't use HR just for visual spacing -->
<p>Some text</p>
<hr>
<hr>
<hr>
<p>More text</p>

Not for Visual Decoration Only

Better
Avoid

<div style="border-bottom: 1px solid #ccc; margin: 1rem 0;"></div>
<!-- Or use CSS borders on existing elements -->

<hr> <!-- Used only for visual line, no thematic meaning -->

Accessibility

Screen readers announce horizontal rules as separators:

<!-- Screen reader: "Separator" or "Horizontal rule" -->
<p>First section.</p>
<hr>
<p>Second section.</p>

ARIA Role

The <hr> element has an implicit ARIA role of separator:

<!-- These are equivalent -->
<hr>
<hr role="separator">

Custom Labels

Add context for screen reader users when needed:

<hr aria-label="End of introduction">

Common Patterns

Page Sections

<main>
<section>
  <h2>About Us</h2>
  <p>We are a company dedicated to excellence...</p>
</section>

<hr>

<section>
  <h2>Our Services</h2>
  <p>We offer a range of professional services...</p>
</section>

<hr>

<section>
  <h2>Contact</h2>
  <p>Get in touch with our team...</p>
</section>
</main>

Result

Interactive code playground requires JavaScript. Here's the code:

<main>
<section>
  <h2>About Us</h2>
  <p>We are a company dedicated to excellence...</p>
</section>

<hr>

<section>
  <h2>Our Services</h2>
  <p>We offer a range of professional services...</p>
</section>

<hr>

<section>
  <h2>Contact</h2>
  <p>Get in touch with our team...</p>
</section>
</main>

Article Metadata

<article>
<header>
  <h1>Article Title</h1>
  <p>By Author Name • December 11, 2025</p>
</header>

<hr>

<p>Article content begins here...</p>

<hr>

<footer>
  <p>Filed under: Web Development, HTML</p>
</footer>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<header>
  <h1>Article Title</h1>
  <p>By Author Name • December 11, 2025</p>
</header>

<hr>

<p>Article content begins here...</p>

<hr>

<footer>
  <p>Filed under: Web Development, HTML</p>
</footer>
</article>

List Separators

<div class="feature-list">
<div class="feature">
  <h3>Feature One</h3>
  <p>Description of the first feature.</p>
</div>

<hr>

<div class="feature">
  <h3>Feature Two</h3>
  <p>Description of the second feature.</p>
</div>

<hr>

<div class="feature">
  <h3>Feature Three</h3>
  <p>Description of the third feature.</p>
</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="feature-list">
<div class="feature">
  <h3>Feature One</h3>
  <p>Description of the first feature.</p>
</div>

<hr>

<div class="feature">
  <h3>Feature Two</h3>
  <p>Description of the second feature.</p>
</div>

<hr>

<div class="feature">
  <h3>Feature Three</h3>
  <p>Description of the third feature.</p>
</div>
</div>

Best Practices

Don’t Overuse

Good
Excessive

<article>
  <h2>Section 1</h2>
  <p>Content...</p>

  <hr>

  <h2>Section 2</h2>
  <p>Content...</p>
</article>

<p>Text</p>
<hr>
<p>More text</p>
<hr>
<p>Even more</p>
<hr>
<p>Too many HRs!</p>

Use Semantic Alternatives

Better (Semantic)
Less Semantic

<article>
  <section>
    <h2>First Topic</h2>
    <p>Content...</p>
  </section>

  <section>
    <h2>Second Topic</h2>
    <p>Content...</p>
  </section>
</article>

<div>
  <h2>First Topic</h2>
  <p>Content...</p>
  <hr>
  <h2>Second Topic</h2>
  <p>Content...</p>
</div>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <hr> element has been supported since the earliest browsers.

Line break within text. Learn more →

Thematic grouping of content. Learn more →

Generic container for styling. Learn more →

Introductory content. Learn more →

<hr> - Thematic Break (Horizontal Rule)

The <hr> Element

Quick Example

Syntax

Attributes

Common Use Cases

Section Separator

Scene Change in Stories

Separating Related Content

Form Sections

Styling the HR Element

Basic Styling

Dotted Line

Dashed Line

Gradient Line

Centered Short Line

Shadow Effect

Decorative Style

Thick Bold Line

Semantic Meaning

Use for Thematic Breaks

Not for Visual Decoration Only

Accessibility

Screen Reader Behavior

ARIA Role

Custom Labels

Common Patterns

Page Sections

Article Metadata

List Separators

Best Practices

Don’t Overuse

Use Semantic Alternatives

Browser Support

Related Elements

Specifications

The `<hr>` Element