Home » HTML hr Tag Guide: Examples, Styling & Best Practices

HTML <hr> Tag – Complete Guide with Examples & Best Practices

Introduction

When creating webpages, organizing content is just as important as writing it. A page filled with headings, paragraphs, images, and lists can quickly become difficult to read if there is no visual separation between sections.

That’s where the HTML <hr> tag becomes useful.

The <hr> tag creates a horizontal line across a webpage, helping users identify a change in topic or section. While many beginners think it is simply a decorative line, its actual purpose is to represent a thematic break in content.

In this guide, you’ll learn everything about the HTML hr tag, including syntax, examples, styling techniques, SEO considerations, and best practices.

Learn HTML basics here:
https://w3htmlschool.com/html/

Learn HTML elements here:
https://w3htmlschool.com/html-elements-a-complete-guide/

What is <hr> Tag?

What is the <hr> tag in HTML? The <hr> tag is used to create a thematic break or horizontal line between sections of content in an HTML document.
When should you use the <hr> tag? Use the <hr> tag when you want to separate content sections or indicate a change in topic.
Is the <hr> tag self-closing? Yes, the <hr> tag is a void element and does not require a closing tag.
What does the <hr> tag represent? The <hr> tag represents a thematic break between paragraphs, sections, or content groups.

The HTML horizontal rule tag is one of the simplest HTML elements. It creates a visible horizontal divider and helps readers understand that one section has ended and another has begun.

Basic Syntax of <hr>

<p>This is the first paragraph.</p>

<hr>

<p>This is the second paragraph.</p>

Output Explanation

The browser displays a horizontal line across the page.

How It Works

  • &lt;hr&gt; inserts a thematic break
  • No closing tag is required
  • Browsers automatically render a horizontal line

Why Use the HTML <hr> Tag?

Why is the
Why is the <hr> tag used in HTML? The <hr> tag is used to separate content sections and indicate a thematic shift between topics in a webpage.

Using the <hr> tag helps:

  • Improve readability
  • Separate content sections
  • Create visual structure
  • Enhance user experience

Think of it like a divider between chapters in a book.

Real-World Examples

Example 1: Separating Content Sections

<h2>Introduction</h2>

<p>This is the introduction section.</p>

<hr>

<h2>Main Content</h2>

<p>This is the main content section.</p>

Explanation

The <hr> line visually separates the introduction from the main content.

Example 2: Blog Post Sections

<h2>What is HTML?</h2>

<p>HTML is the standard markup language.</p>

<hr>

<h2>Why Learn HTML?</h2>

<p>HTML is the foundation of web development.</p>

This creates a cleaner reading experience.

Example 3: Footer Separation

<p>Main article content...</p>

<hr>

<footer>
  Copyright 2026
</footer>

A horizontal rule separates the article from the footer.

HTML5 Meaning of <hr>

Before HTML5, developers mainly used <hr> for visual lines.

Today, HTML5 gives the <hr> tag semantic meaning.

Modern Meaning

The <hr> element represents:

  • A thematic change
  • A new section
  • A shift in topic

This makes your HTML more meaningful and accessible.

Default Browser Styling

Most browsers automatically apply:

  • Full-width horizontal line
  • Gray color
  • Small vertical margins

Example:  <hr>

No CSS is required.

Styling the <hr> Tag with CSS

One of the best things about the <hr> tag is that it can be customized completely.

Example 1: Change Color

<style>
hr {
  border: 1px solid blue;
}
</style>

Example 2: Thick Horizontal Line

<style>
hr {
  border: 0;
  height: 4px;
  background: black;
}
</style>

Example 3: Dotted Divider

<style>
hr {
  border-top: 3px dotted gray;
}
</style>

Example 4: Dashed Divider

<style>
hr {
  border-top: 2px dashed #333;
}
</style>

Example 5: Gradient Divider

<style>
hr {
  border: none;
  height: 3px;
  background: linear-gradient(to right, red, blue);
}
</style>

Common CSS Properties for <hr>

PropertyPurpose
borderDefines line style
heightControls thickness
widthControls length
backgroundAdds color
marginAdds spacing

<hr> vs <br> Tag

Many beginners confuse these tags.

Feature<hr><br>
PurposeSection separatorLine break
Visual LineYesNo
Semantic MeaningYesNo
Creates New SectionYesNo

Example Comparison

Using <br>

Line One<br>
Line Two

Output:

Line One
Line Two

Using <hr>

Section One

<hr>

Section Two

Output:

A visible divider appears between sections.

Best Practices

Following best practices helps maintain clean HTML.

Use for Thematic Breaks

Use <hr> when content topics change.

Keep Styling Consistent

Use the same divider style throughout the site.

Combine with Headings

Works well between sections and headings.

Use CSS for Custom Design

Modern websites often customize <hr> using CSS.

Common Mistakes

Avoid these beginner mistakes.

Using Multiple <hr> Tags

<hr>
<hr>
<hr>

One divider is usually enough.

 Using <hr> Only for Decoration

Remember that it has semantic meaning.

Over-Styling

Avoid distracting designs that hurt readability.

Accessibility Benefits

The <hr> tag helps assistive technologies understand content structure.

Screen readers can identify thematic breaks and provide a better experience for users.

This makes your website more accessible and inclusive.

SEO Considerations

Does <hr> Improve SEO?

The <hr> tag does not directly improve rankings.

However, it can indirectly help by:

✔ Improving Content Structure

Well-organized content is easier to read.

✔ Enhancing User Experience

Readers stay engaged longer.

✔ Supporting Semantic HTML

Search engines understand content relationships better.

Real-World Use Cases

The HTML <hr> tag is commonly used in:

Blog Articles

Separate topics.

Documentation

Divide chapters.

Product Pages

Separate specifications.

Landing Pages

Create visual breaks.

News Articles

Separate sections.

FAQs

1. What is the <hr> tag in HTML?

The <hr> tag creates a thematic break or horizontal divider between sections of content.

2. Is <hr> a self-closing tag?

Yes. The <hr> tag is a void element and does not need a closing tag.

3. What is the difference between <hr> and <br>?

The <hr> tag creates a thematic divider, while <br> only creates a line break.

4. Can I style the <hr> tag with CSS?

Yes. You can change its color, width, thickness, and style using CSS.

5. Does the <hr> tag affect SEO?

Not directly, but it improves content structure and readability.

The HTML <hr> tag is a simple yet powerful element that helps organize content and improve readability. While it appears as a horizontal line, its real purpose is to indicate a thematic change between sections.

As a beginner, understanding semantic HTML elements like <hr> will help you create cleaner, more professional websites.

Key Takeaways

  • Use <hr> for thematic breaks
  • Avoid using it only for decoration
  • Style it with CSS when needed
  • Combine it with headings and sections
  • Follow semantic HTML best practices

Mastering small tags like <hr> builds a strong foundation for becoming a successful web developer.

Learn more HTML tags here:
https://w3htmlschool.com/html-tags-and-attributes-complete-guide-with-examples/

Scroll to Top