The horizontal rule tag (hr)

The <hr> tag in HTML is used to create a horizontal rule, commonly employed for content segmentation or visual separation. It is a self-closing element that does not require a closing tag and can be further customized using CSS.

Basic Usage of the <hr> Tag

The default style of the <hr> tag is a horizontal line that spans the width of its container, with its color and thickness determined by the browser. Here’s a simple example:

<p>This is the first paragraph of content.</p>
<hr>
<p>This is the second paragraph of content.</p>

The rendered result will display a horizontal divider between the two paragraphs. Different browsers may render the default style differently—for example, Chrome typically shows a thin gray line, while Firefox may display a slightly thicker one.

Attributes of the <hr> Tag

Although most legacy attributes of <hr> were removed in HTML5, global attributes can still be used to control its behavior:

<hr id="section-divider" class="custom-hr" data-purpose="separator">

Common global attributes include:

• id: Specifies a unique identifier for the horizontal rule.
• class: Assigns a CSS class name.
• style: Applies inline styles directly.
• title: Provides tooltip text displayed on hover.

Customizing Styles with CSS

In modern development, CSS is typically used to customize the appearance of <hr>. Here are some common styling examples:

/* Basic style customization */
hr {
  border: 0;
  height: 1px;
  background-color: #ccc;
  margin: 20px 0;
}

/* Gradient effect */
hr.gradient {
  height: 3px;
  background: linear-gradient(90deg, #ff0000, #00ff00);
}

/* Dashed style */
hr.dashed {
  border: 0;
  border-top: 2px dashed #999;
}

/* Shadow effect */
hr.shadow {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

Corresponding HTML usage:

<hr class="gradient">
<hr class="dashed">
<hr class="shadow">

<hr> in Responsive Design

In responsive layouts, the style of the horizontal rule can be adjusted for different screen sizes:

@media (max-width: 768px) {
  hr {
    margin: 10px 0;
    height: 2px;
  }
}

@media (min-width: 1200px) {
  hr {
    margin: 30px 0;
  }
}

Creative Usage Examples

The <hr> tag can be used for more than just simple dividers—it can also create various visual effects:

<!-- Vertical divider -->
<style>
  .vertical-hr {
    width: 1px;
    height: 100px;
    margin: 0 auto;
    background-color: #000;
  }
</style>
<div class="vertical-hr"></div>

<!-- Decorative divider -->
<hr style="
  border: 0;
  height: 15px;
  background: url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='15' viewBox='0 0 20 15'><circle cx='10' cy='7' r='5' fill='%23ff0000'/></svg>') repeat-x;
">

Accessibility Considerations

To ensure screen readers correctly interpret the <hr> tag, ARIA attributes can be added:

<hr aria-hidden="false" role="separator">

For more explicit semantics, consider using a <div> with an ARIA role:

<div role="separator" aria-orientation="horizontal" class="custom-separator"></div>

Browser Compatibility

The <hr> tag is well-supported across all modern browsers, including:

• Chrome
• Firefox
• Safari
• Edge
• Opera
• Internet Explorer 9+

For older versions of IE, use the following hack:

hr {
  color: #000;
  background-color: #000;
  height: 1px;
  /* IE6-7 */
  *color: #000;
  *background-color: #000;
  *height: 1px;
}

Alternative Solutions

While <hr> is convenient, other methods may sometimes be more suitable:

1. Using Borders:

<div class="border-separator"></div>
<style>
  .border-separator {
    border-top: 1px solid #000;
    margin: 20px 0;
  }
</style>

2. Using Pseudo-elements:

.separator::after {
  content: "";
  display: block;
  border-top: 1px solid #ccc;
  margin: 15px 0;
}

3. Using SVG:

<div class="svg-separator">
  <svg width="100%" height="10px">
    <line x1="0" y1="5" x2="100%" y2="5" stroke="#333" stroke-width="1" stroke-dasharray="5,3" />
  </svg>
</div>

Practical Use Cases

1. Separating Article Content:

<article>
  <h2>Chapter 1</h2>
  <p>Chapter 1 content...</p>
  <hr>
  <h2>Chapter 2</h2>
  <p>Chapter 2 content...</p>
</article>

2. Grouping Form Sections:

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <!-- Form controls -->
  </fieldset>
  <hr>
  <fieldset>
    <legend>Payment Information</legend>
    <!-- Form controls -->
  </fieldset>
</form>

3. Separating Comments:

<div class="comment">
  <p>First comment content...</p>
  <hr class="comment-divider">
  <p>Second comment content...</p>
</div>

Performance Considerations

As a native HTML element, <hr> generally renders more efficiently than using multiple <div> elements to simulate dividers. For pages requiring many dividers, using <hr> can reduce the number of DOM nodes:

<!-- Better performance -->
<section>
  <p>Content 1</p>
  <hr>
  <p>Content 2</p>
  <hr>
  <p>Content 3</p>
</section>

<!-- Worse performance -->
<section>
  <p>Content 1</p>
  <div class="separator"></div>
  <p>Content 2</p>
  <div class="separator"></div>
  <p>Content 3</p>
</section>

<hr> in Print Styles

In print stylesheets, you can define specific styles for <hr> when printed:

@media print {
  hr {
    border: 0;
    border-top: 1px solid #000;
    height: 0;
    margin: 1cm 0;
  }
  
  hr.page-break {
    page-break-after: always;
    visibility: hidden;
  }
}

Usage example:

<p>First page content</p>
<hr class="page-break">
<p>Second page content</p>

Animation Effects

Simple animations can be added to <hr> using CSS:

hr.animated {
  border: 0;
  height: 3px;
  background: linear-gradient(90deg, #f00, #0f0, #00f);
  background-size: 200% 100%;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Integration with CSS Frameworks

Major CSS frameworks provide predefined styles for <hr>:

1. Bootstrap:

<hr class="my-4">
<!-- Bootstrap offers various spacing utility classes -->

2. Bulma:

<hr class="is-divider">
<!-- Bulma includes specialized divider classes -->

3. Tailwind CSS:

<hr class="my-8 border-t-2 border-gray-300">
<!-- Combines Tailwind's utility classes -->

Semantic Document Structure

In lengthy documents, <hr> can help divide content sections:

<main>
  <section>
    <h2>Product Introduction</h2>
    <p>...</p>
  </section>
  
  <hr aria-hidden="true">
  
  <section>
    <h2>Technical Specifications</h2>
    <p>...</p>
  </section>
  
  <hr aria-hidden="true">
  
  <section>
    <h2>User Reviews</h2>
    <p>...</p>
  </section>
</main>

Historical Evolution

The <hr> tag has existed since HTML 2.0, and its semantics and presentation have evolved over time:

1. HTML 4.01:

<hr width="50%" size="3" noshade color="red">
<!-- Early versions supported various presentational attributes -->

2. XHTML 1.0:

<hr />
<!-- Required self-closing syntax -->

3. HTML5:

<hr>
<!-- Simplified syntax, removed all presentational attributes -->

Common Misuses

1. Overuse as a Decorative Element:

<!-- Not recommended -->
<div>
  <hr><hr><hr>
</div>

2. Ignoring Accessibility:

<!-- Not recommended -->
<hr role="presentation">
<!-- This hides the semantic meaning of the divider -->

3. Using Deprecated Attributes:

<!-- Avoid using -->
<hr size="5" width="80%" color="blue">

Test Cases

To ensure consistent behavior of <hr> across scenarios, create test cases:

<div style="width: 200px;">
  <hr>
  <p>Horizontal rule in a narrow container</p>
</div>

<div style="width: 800px;">
  <hr>
  <p>Horizontal rule in a wide container</p>
</div>

<div style="overflow: hidden;">
  <hr style="margin-left: -20px;">
  <p>Overflow container test</p>
</div>

Combining with Other Technologies

1. With CSS Grid:

<div class="grid-container">
  <div>Content 1</div>
  <hr class="grid-line">
  <div>Content 2</div>
</div>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .grid-line {
    grid-column: 1;
    margin: 0;
  }
</style>

2. With Flexbox:

<div class="flex-container">
  <div>Left content</div>
  <hr class="flex-separator">
  <div>Right content</div>
</div>
<style>
  .flex-container {
    display: flex;
    align-items: center;
  }
  .flex-separator {
    flex-grow: 1;
    margin: 0 10px;
    height: 1px;
  }
</style>