HTML <hr> Tag for Thematic Breaks

The HTML <hr> element represents a thematic break between paragraph-level sections of content, such as a change of topic or scene. Browsers normally render it as a horizontal line, but that visual line is only the default presentation.

<hr>

Rendered output:

Use CSS when you want to change the rule's width, thickness, color, spacing, or border style.

Semantic Meaning of <hr> Top ↑

In modern HTML, <hr> is not simply a command to draw a line. Use it when the content itself has a thematic transition.

<section>
  <h2>Preparing the Data</h2>
  <p>Clean and validate the input before processing it.</p>
</section>

<hr>

<section>
  <h2>Processing the Data</h2>
  <p>Now apply the required transformation.</p>
</section>

If the page merely needs a decorative border or separator with no thematic meaning, CSS on an existing element or a decorative pseudo-element is often more appropriate.

Styling <hr> with CSS Top ↑

Presentational attributes previously used on <hr> are obsolete. Modern pages should control appearance with CSS.

<style>
hr.custom-rule {
  border: 0;
  height: 3px;
  background-color: #555;
  margin: 2rem 0;
}
</style>

<hr class="custom-rule">

Width and Alignment with CSS Top ↑

Set the width with CSS. Auto margins can center a rule; setting one horizontal margin to 0 can align it to one side.

<style>
hr.short-rule {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
</style>

<hr class="short-rule">

Dashed and Dotted Rules Top ↑

A border is a simple way to create dashed or dotted horizontal rules.

<style>
hr.dashed {
  border: 0;
  border-top: 2px dashed #777;
}
hr.dotted {
  border: 0;
  border-top: 2px dotted #777;
}
</style>

<hr class="dashed">
<hr class="dotted">

Obsolete <hr> Attributes Top ↑

Older HTML pages often used attributes such as width, size, color, align, and noshade directly on <hr>. You may still encounter code such as this while maintaining legacy pages:

<!-- Legacy HTML: do not use for new pages -->
<hr width="50%" size="4" color="red" align="right">

Accessibility and Practical Use Top ↑

Use <hr> when the thematic break is meaningful in the document. Do not rely on the line alone to replace headings or other structure users need for navigation.

• Use headings to identify sections; use <hr> only when a thematic transition also exists.
• Do not use repeated <hr> elements simply to add visual decoration or spacing.
• Use CSS margins for spacing around a rule.
• For a purely decorative vertical line, use CSS such as a border or pseudo-element rather than rotating or repurposing <hr>.
• Keep sufficient contrast when a visible divider is important to understanding the layout.

Common <hr> Mistakes Top ↑

Using obsolete presentation attributes Top ↑

Attributes such as color, size, width, align, and noshade belong to legacy HTML. Use CSS instead.

Using <hr> only to create spacing Top ↑

If you need vertical space, use CSS margin or padding. The <hr> element has semantic meaning.

Using <hr> as a substitute for headings Top ↑

A horizontal rule can mark a thematic break, but it does not label the new section. Use proper headings when users need to understand the section hierarchy.

Using <hr> to draw arbitrary vertical lines Top ↑

For purely visual vertical separators, CSS borders or pseudo-elements are clearer and avoid adding unnecessary semantic breaks.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: