How to Add a Horizontal Line in HTML

Use the <hr> tag when you want to create a visible divider between related sections of content. It is the fastest way to show a thematic break on a page without adding extra layout code.

What you’ll build or solve

You’ll learn how to insert a horizontal line in HTML with the <hr> tag. You’ll also see where it works best and how to avoid using it for layout tricks.

When this approach works best

This approach is the right choice when your content changes topic but still belongs to the same page.

Common real-world scenarios include:

• Separating article sections
• Breaking up long form content
• Dividing comments, notes, or message threads
• Creating a visual split between profile details and contact info

This is a bad idea when you only want extra spacing. In that case, use CSS margin or padding instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Insert the <hr> tag where the divider should appear

Place <hr> between the content blocks you want to separate.

<p>Introduction content goes here.</p>
<hr>
<p>Main content starts here.</p>

For repeated thematic breaks on the same page, use the same tag again where each section changes.

<h2>Chapter 1</h2>
<p>First section text.</p>

<hr>

<h2>Chapter 2</h2>
<p>Second section text.</p>

<hr>

<h2>Chapter 3</h2>
<p>Third section text.</p>

What to look for:

• The browser displays a horizontal divider line across the available width
• Use this for topic changes, section dividers, and content grouping
• Do not use repeated <hr> tags to create large empty gaps
• In HTML5, both <hr> and <hr /> work

Examples you can copy

Blog post section divider

<p>Learn the basics of HTML first.</p>
<hr>
<p>Next, move into CSS styling.</p>

Contact card split

<p>Ana Petrović</p>
<p>Frontend Developer</p>
<hr>
<p>ana@example.com</p>

FAQ divider

<h3>What is HTML?</h3>
<p>HTML structures web content.</p>
<hr>
<h3>What is CSS?</h3>
<p>CSS styles web content.</p>

Common mistakes and how to fix them

Mistake 1: Using multiple <hr> tags for spacing

What the reader might do:

<p>Section one</p>
<hr>
<hr>
<hr>
<p>Section two</p>

Why it breaks: this uses semantic dividers as visual spacing, which makes the structure misleading.

Corrected approach:

<p class="section-one">Section one</p>
<p>Section two</p>

<style>
  .section-one {
    margin-bottom: 48px;
  }
</style>

Mistake 2: Using <hr> inside unrelated layout blocks

What the reader might do:

<div class="card">
  <hr>
</div>

Why it breaks: if there is no content change, the divider has no semantic meaning and only adds noise.

Corrected approach:

<div class="card">
  <p>Profile details</p>
  <hr>
  <p>Contact details</p>
</div>

Mistake 3: Using <hr> instead of headings or paragraphs

What the reader might do:

<p>Pricing</p>
<hr>
<p>FAQ</p>

Why it breaks: if the sections need labels, headings communicate structure better than plain divider lines.

Corrected approach:

<h2>Pricing</h2>
<p>Choose the plan that fits your needs.</p>

<hr>

<h2>FAQ</h2>
<p>Here are the most common questions.</p>

Troubleshooting

If the line does not appear where expected, move <hr> outside surrounding inline tags like <span>.

If the divider looks too wide, place it inside a container with a fixed width.

If you see large stacked lines, remove repeated <hr> tags and use CSS spacing instead.

If the divider feels unnecessary, check whether a heading or paragraph break would communicate the structure more clearly.

Quick recap

• Use <hr> to add a thematic divider between content sections
• Insert it where the topic or content group changes
• Repeat the same tag for multiple section breaks
• Use headings when the sections need labels
• Use CSS margin for spacing, not repeated divider tags