09. hr Tag

Introduction

The <hr> (horizontal rule) element creates a thematic break between content sections. It visually separates content with a horizontal line, helping organize information and improve readability. The hr element is self-closing and represents a paragraph-level thematic break.

Basic Usage

<section>
    <p>Content before the break.</p>
    <hr>
    <p>Content after the break.</p>
</section>

Visual Appearance

By default, browsers render <hr> as:

• A horizontal line
• Full width of container
• Centered alignment
• Shaded appearance

Common Use Cases

Section Separation

Separating content sections:

<article>
    <section>
        <h2>Introduction</h2>
        <p>Content...</p>
    </section>
    <hr>
    <section>
        <h2>Main Content</h2>
        <p>Content...</p>
    </section>
</article>

Topic Changes

Indicating topic changes:

<p>Discussion about topic A.</p>
<hr>
<p>Discussion about topic B.</p>

Styling

Customize appearance with CSS:

<hr>

<style>
    hr {
        border: none;
        border-top: 2px solid #ccc;
        margin: 2em 0;
    }
</style>

Best Practices

Semantic Use

Use for thematic breaks, not just decoration:

<!-- Good: Thematic break -->
<section>Content A</section>
<hr>
<section>Content B</section>

<!-- Avoid: Just for decoration -->
<div>Content</div>
<hr>
<div>More content</div>

References

• MDN Web Docs - hr element