HTML Elements Tutorial

<hr> Horizontal Rules

Master the art of content separation with semantic and stylish horizontal rules

<hr>

HTML Element

100%

Browser Support

A11Y

Accessible

CSS

Customizable

What are Horizontal Rules?

The <hr> element represents a thematic break between paragraph-level elements. It's commonly used to separate content sections, indicate scene changes, or create visual divisions.

Semantic Meaning

Screen readers announce horizontal rules as 'thematic break' or 'separator', making them accessible for users with visual impairments.

Basic Syntax

<!-- Basic Horizontal Rule -->
<hr>

<!-- With CSS Class -->
<hr class="section-divider">

<!-- With Inline Styles -->
<hr style="border: 2px solid #3b82f6;">

HR Style Gallery

Live Preview

Content above the horizontal rule

Content below the horizontal rule

Custom HR Builder

Thickness: 2px

Color

Width: 100%

Animation

Live Preview

Content above custom HR

Content below custom HR

Generated CSS

hr {
  height: 2px;
  background-color: #3b82f6;
  width: 100%;
  border: none;
  
  
}

Common Use Cases

📄

Content Separation

Divide different sections of content clearly

Between article sections, blog posts, or topic changes

🎨

Visual Hierarchy

Create clear visual structure and organization

In documentation, tutorials, or long-form content

🎭

Thematic Breaks

Indicate scene changes or thematic shifts

In stories, scripts, or narrative content

📝

Form Sections

Separate different form sections logically

Between personal info, payment details, etc.

Creative HR Examples

Gradient Glow

background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
height: 4px;
border: none;
border-radius: 10px;
box-shadow: 0 0 10px rgba(79, 205, 196, 0.5);

Dotted Pattern

border: none;
height: 3px;
background: repeating-linear-gradient(
  90deg,
  #3b82f6,
  #3b82f6 4px,
  transparent 4px,
  transparent 8px
);

Animated Line

border: none;
height: 3px;
background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
background-size: 200% 100%;
animation: shimmer 2s infinite;

Double Line

border: none;
height: 6px;
background: linear-gradient(
  to bottom,
  #ef4444 0%,
  #ef4444 50%,
  #3b82f6 50%,
  #3b82f6 100%
);
border-radius: 3px;

Best Practices

Semantic Usage

Use <hr> for thematic breaks, not just visual separation

💡 Screen readers announce horizontal rules as thematic breaks

Accessibility

Ensure proper contrast and avoid purely decorative rules

💡 Use aria-hidden='true' for purely decorative horizontal rules

Consistency

Maintain consistent styling throughout your application

💡 Create CSS classes for different HR variants

Responsive Design

Ensure horizontal rules work well on all screen sizes

💡 Use relative units and test on mobile devices

Accessibility Considerations

✅ Do This

Use <hr> for thematic breaks
Ensure sufficient color contrast
Use semantic HTML structure
Test with screen readers

❌ Avoid This

Don't use for purely decorative purposes
Avoid low contrast colors
Don't hide from screen readers unnecessarily
Avoid using multiple consecutive HRs

Accessible Examples

<!-- Semantic usage -->
<article>
  <h2>Section One</h2>
  <p>Content for first section...</p>
  <hr aria-label="Thematic break between sections">
  <h2>Section Two</h2>
  <p>Content for second section...</p>
</article>

<!-- Decorative-only (hide from screen readers) -->
<div class="decorative-line" aria-hidden="true"></div>