HTML hr Tag – Complete Guide with Examples & Best Practices

Introduction: What Is the HTML `<hr>` Tag?

When content on a webpage needs a clear separation, HTML provides a simple and effective tag called the horizontal rule.

The HTML <hr> tag is used to:

Separate sections of content
Indicate a topic change
Improve readability
Visually divide text blocks

For beginners, the <hr> tag is one of the easiest HTML elements to learn, yet it plays an important role in content structure and semantics.

What Is the hr Tag in HTML?

The <hr> tag represents a thematic break between sections of content.

👉 In simple terms:
It draws a horizontal line across the page to separate content.

Basic Syntax of hr

<hr>
✅ Key Points
It is an empty (self-closing) tag

No closing tag is required

The browser draws a horizontal line

by default

Example 1: Basic Use of `<hr>`

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

<hr>

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

Output Explanation

A horizontal line appears between the two paragraphs
Clearly separates content sections

Why Use hr Instead of Just Space?

Using <hr>:

Adds semantic meaning (content break)
Improves readability
Helps screen readers understand section changes
Is better than using multiple <br> tags

HTML hr Tag Is Semantic

n HTML5, <hr> is not just a line.

It represents:

A thematic break between paragraphs or sections

👉 This means it adds meaning, not just design.

Styling the `<hr>` Tag with CSS (Recommended)

The default <hr> style is simple, but you can customize it using CSS.

Example 2: Change Thickness and Color

<hr class="custom-line">

CSS

.custom-line {
  border: none;
  height: 2px;
  background-color: #333;
}

Example 3: Dashed Horizontal Line

hr {
  border: none;
  border-top: 2px dashed #666;
}

Complete HTML Example

<!DOCTYPE html>
<html>
<head>
<style>
hr {
  border: none;
  height: 3px;
  background-color: #000;
  margin: 30px 0;
}
</style>
</head>
<body>

<h2>Introduction</h2>
<p>This section explains the topic.</p>

<hr>

<h2>Details</h2>
<p>This section contains detailed information.</p>

</body>
</html>

Old HTML Attributes (Not Recommended)

Earlier, <hr> supported attributes like:

❌ These are deprecated
✅ Always use CSS instead

Common Beginner Mistakes

Using <hr> just for decoration
Replacing section headings with <hr>
Overusing <hr> everywhere
Styling using old HTML attributes
Confusing <hr> with <br>

hr vs br (Important Difference)

Feature	`<hr>`	`<br>`
Purpose	Section break	Line break
Visual	Horizontal line	New line
Semantic meaning	✅ Yes	❌ No
Use case	Topic change	Address/poem

👉 Use <hr> for content separation, not spacing.

Accessibility & SEO Benefits

Screen readers announce <hr> as a section break
Search engines understand content structure
Improves document outline clarity

👉 Semantic tags always improve accessibility.

Best Practices for HTML hr Tag

Use <hr> only for thematic breaks
Style using CSS
Keep usage minimal
Combine with headings for clarity
Avoid using it only for decoration

FAQs: HTML hr Tag

What does the `<hr>` tag do?

It creates a thematic break and displays a horizontal line.

Is `<hr>` self-closing?

Yes, it does not need a closing tag.

Can I style `<hr>` with CSS?

Yes, CSS is the recommended method.

Is `<hr>` deprecated?

No, it is valid and semantic in HTML5.

Should I use `<hr>` for spacing?

No. Use CSS margin or padding instead.