HTML <hr> Element

Publish in HTML Tutorial el 24/05/2025 15:21

The <hr> element, which stands for "horizontal rule", is used to create a thematic break or divider between sections of content. Originally designed as a simple horizontal line, modern HTML5 redefines it as a semantic element representing a paragraph-level thematic break.

While visually it typically appears as a horizontal line by default, its primary purpose is semantic - to indicate a change of topic or scene within a document. The appearance can be customized with CSS.

Basic Syntax

Here's how the basic <hr> tag looks in HTML:

And here's how it renders:

Play Code

<p>Content before the horizontal rule</p>
<hr>
<p>Content after the horizontal rule</p>

Examples of <hr> Usage

1. Basic Thematic Break

A simple divider between two sections of an article:

Play Code

<article>
  <h2>Section One</h2>
  <p>This is the content of the first section.</p>
  <hr>
  <h2>Section Two</h2>
  <p>This is the content of the second section.</p>
</article>

2. Styled HR with CSS

Customizing the appearance of the horizontal rule:

Play Code

<style>
  .fancy-divider {
    border: 0;
    height: 3px;
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    margin: 2em 0;
  }
</style>

<p>Above the fancy divider</p>
<hr class="fancy-divider">
<p>Below the fancy divider</p>

3. HR with JavaScript Interaction

Making the HR element interactive with JavaScript:

Play Code

<style>
  #interactive-hr {
    height: 5px;
    background-color: #3498db;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  #interactive-hr:hover {
    height: 10px;
    background-color: #e74c3c;
  }
</style>

<p>Hover over or click the divider below</p>
<hr id="interactive-hr">
<p>Try interacting with the divider above</p>

<script>
  document.getElementById('interactive-hr').addEventListener('click', function() {
    this.style.background = '#' + Math.floor(Math.random()*16777215).toString(16);
  });
</script>

4. Vertical Rule Alternative

Using CSS to create a vertical divider (not a true HR element, but a common alternative):

Play Code

<style>
  .vertical-divider {
    width: 0;
    border-left: 1px solid #ccc;
    height: 100px;
    margin: 0 20px;
    display: inline-block;
  }
</style>

<div style="display: flex; align-items: center;">
  <span>Left Content</span>
  <div class="vertical-divider"></div>
  <span>Right Content</span>
</div>

5. Animated HR with JavaScript

Creating an animated divider that changes over time:

Play Code

<style>
  #animated-hr {
    border: 0;
    height: 2px;
    background: #333;
    position: relative;
    overflow: hidden;
  }
  #animated-hr::before {
    content: '';
    position: absolute;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, #ff0, transparent);
    animation: shine 2s infinite;
  }
  @keyframes shine {
    100% { left: 150%; }
  }
</style>

<p>Watch the animated divider below</p>
<hr id="animated-hr">
<p>The animation will continue indefinitely</p>

<script>
  // Additional JavaScript to change animation speed on click
  document.getElementById('animated-hr').addEventListener('click', function() {
    const speeds = ['0.5s', '1s', '2s', '5s'];
    const currentSpeed = getComputedStyle(this.querySelector('::before')).animationDuration;
    const nextIndex = (speeds.indexOf(currentSpeed) + 1) % speeds.length;
    this.style.setProperty('--animation-speed', speeds[nextIndex]);
  });
</script>

Tips and Tricks

Semantic Use: Always use <hr> for thematic breaks, not just for visual separation.
Styling: Modern browsers typically display HR as a border rather than using the color property. Use background-color and height for better control.
Accessibility: Screen readers often announce HR elements, so use them judiciously to avoid confusing users.
Responsive Design: Consider adjusting HR margins and size for different screen sizes.
Creative Alternatives: While HR is horizontal by nature, you can create vertical dividers with CSS transforms or border properties.

Browser Support

The <hr> element is supported by all browsers, including legacy ones. However, the default styling may vary slightly between browsers, so for consistent appearance, always specify your own styles.