<hr> - Horizontal divider line

The <hr> tag in HTML is used to create a horizontal divider, typically for visually separating content sections. Its function is straightforward, but CSS can be used to extend it with rich styling effects.

Basic Usage of the <hr> Tag

<hr> is an empty tag that doesn't require closing. Simply inserting it into HTML generates a default-style horizontal line:

<p>This is the first paragraph</p>
<hr>
<p>This is the second paragraph</p>

Browsers render it by default as a gray, shadowed 1px-high line spanning the width of its parent container. There may be slight variations across different browsers.

Attributes and Compatibility

Although most traditional attributes are deprecated in modern HTML5, understanding them is helpful for maintaining legacy code:

<!-- Example of traditional attributes -->
<hr align="center" width="50%" size="3" color="red" noshade>

• align: Controls horizontal alignment (left/center/right)
• width: Sets the width (in pixels or percentage)
• size: Defines thickness (in pixels)
• color: Specifies the color (name or hex code)
• noshade: Removes the shadow effect

In modern development, CSS should replace these attributes:

hr {
  width: 50%;
  height: 3px;
  background-color: red;
  margin: 20px auto;
  border: none;
}

Advanced CSS Styling

CSS enables various visual effects:

Gradient Divider

hr.gradient {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
}

Dashed Style

hr.dashed {
  border-top: 2px dashed #ccc;
  background: transparent;
}

Custom Pattern

hr.pattern {
  height: 10px;
  border: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="2" fill="%23ff0000"/></svg>');
}

Semantics and Accessibility

While <hr> inherently carries semantic meaning for content separation, ARIA can enhance it:

<hr aria-label="Content divider" role="separator">

Screen readers will recognize it as a separator. For complex layouts, consider using a div with role="separator" instead.

Responsive Design Tips

Combine with media queries for adaptive effects:

hr.responsive {
  height: 1px;
}

@media (min-width: 768px) {
  hr.responsive {
    height: 2px;
  }
}

Creative Application Examples

Decorative Section Divider

<div class="section-divider">
  <hr class="fancy-line">
  <span class="decorative-star">✻</span>
  <hr class="fancy-line">
</div>

.fancy-line {
  width: 40%;
  display: inline-block;
  vertical-align: middle;
}

.decorative-star {
  padding: 0 10px;
  color: #ff6b6b;
}

Animated Divider

hr.animated {
  height: 4px;
  background: linear-gradient(90deg, transparent, #ff6b6b, transparent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

Browser Compatibility Notes

• IE8 and below have limited CSS3 support
• Mobile browsers may ignore certain shadow effects
• Test SVG backgrounds on Retina displays

Alternative Solutions Comparison

In some cases, other elements may be more suitable:

<!-- Simulate with border -->
<div class="border-divider"></div>

<!-- CSS alternative -->
<style>
  .border-divider {
    border-top: 1px solid #ddd;
    margin: 20px 0;
  }
</style>

Selection criteria:

• Use <hr> for semantic purposes
• Use <div> for complex interactions
• Use border for inline dividers

Print Style Optimization

Ensure dividers remain visible when printed:

@media print {
  hr {
    border-top: 1px solid #000;
    background: none;
  }
}

Integration with CSS Frameworks

Major frameworks like Bootstrap include predefined styles for <hr>:

<!-- Bootstrap divider -->
<hr class="my-4 bg-primary">

Tailwind CSS utility-class approach:

<hr class="border-t-2 border-dashed border-indigo-500 my-8">