Skip to main content

HTML Horizontal Rule

Think about reading a story. Suddenly the writer leaves a small gap, maybe adds a line or a few stars, and starts again in a new place or at a new time. You feel the change right away. Nobody had to explain it.

HTML has a tool for exactly this moment: the horizontal rule, written as <hr />. It draws a line across the page, but its real job is not decoration. It tells the reader, "The topic is changing here."


What You Will Learn​

  • What the <hr /> tag is and what it means
  • When a horizontal rule is the right choice
  • How to style it with CSS, since old HTML attributes are outdated
  • How screen readers treat it
  • Common mistakes, and better alternatives

The Basics​

The <hr /> tag creates a thematic break between two blocks of content. It is a void element, which means it has no content inside and no closing tag. (You met void elements in the Line Breaks lesson.)

index.html
<h2>Morning Routine</h2>
<p>I start my day with a glass of water and a short walk.</p>

<hr />

<h2>Evening Routine</h2>
<p>I finish my day by reading for twenty minutes.</p>

The browser draws a thin line across the full width of its container, with a little space above and below. It is a block-level element, so it always sits on its own row.

Two ways to write it

In plain HTML, both <hr> and <hr /> work. In MDX and JSX, use <hr />, because unclosed tags cause errors there.

What Does "Thematic Break" Mean?​

In older HTML, <hr> meant "horizontal rule", so people thought of it only as a line. In modern HTML, the meaning is a shift in theme at the paragraph level.

Here is the difference in simple terms.

Old ideaModern idea
"Draw a line here.""The subject changes here."
About appearanceAbout meaning
Visual decorationContent structure

That is why the line you see is only the default look. The meaning stays even if you restyle it.

When to Use <hr />​

Use it when there is a real change of topic inside a section, but the change is too small for a new heading.

  • A scene change in a story
  • A shift in subject between two paragraphs
  • A separator between a main article and its notes or sign-off
  • A pause between a question and its long answer
story.html
<p>Amara closed her laptop and looked out of the window. The rain had stopped.</p>

<hr />

<p>Three weeks later, her first app was live in more than thirty countries.</p>

A quick test: if you removed the line, would the change of topic still be clear? If yes, you probably do not need <hr />. If a reader might get confused, it helps.

Old Attributes Are Gone: Use CSS​

Old tutorials show attributes like width, size, align, and noshade on <hr>. These are deprecated. They still work in some browsers, but you should not use them. CSS gives you full control instead.

Old attributeModern CSS
width="50%"width: 50%;
size="5"border-width or height
align="center"margin-inline: auto;
noshadeborder-style and background

A Clean Custom Line​

styled-hr.html
<style>
  .soft-line {
    width: 60%;
    margin: 2rem auto;
    border: none;
    border-top: 3px solid #2563eb;
    border-radius: 2px;
  }
</style>

<p>First topic.</p>
<hr class="soft-line" />
<p>Second topic.</p>

A Few More Styles​

hr.dashed {
  border: none;
  border-top: 2px dashed #64748b;
}
Reset first

Browsers add their own border style and margin to <hr>. Setting border: none first, then adding the style you want, gives you a predictable result in every browser.

Accessibility and Global Readers​

Not everyone sees the page in the same way, so it helps to know what happens behind the scenes.

  • Screen readers usually announce <hr /> as a separator. Some readers skip it, and others say the word. This is why you should use it only when the break is meaningful.
  • Decorative lines made with CSS borders are ignored by assistive tools. That is good when the line is only for looks.
  • Contrast matters. A very light gray line on a white background may be invisible for low-vision users. Choose a color that can be seen.
  • Right-to-left languages such as Arabic and Hebrew work fine with <hr />, because it spans the full width of its container.
  • Do not rely on the line alone. If a new section is important, add a heading, which also helps translation tools and search engines.

Choosing the Right Tool​

<hr /> is not the only way to separate content. Pick the tool that matches your goal.

GoalBest choice
Change of topic inside a section<hr />
A new major section of the pageA heading, like <h2>
A purely visual line, such as under a titleCSS border-bottom
Space between two blocksCSS margin or padding
Separate items in a listUse list styling or border on each item

Common Mistakes​

Mistake 1: Using <hr /> everywhere​

<!-- Too many lines -->
<p>Paragraph one.</p>
<hr />
<p>Paragraph two.</p>
<hr />
<p>Paragraph three.</p>
<hr />

When every paragraph gets a line, the break loses its meaning. Save it for real changes of topic.

Mistake 2: Using it only for decoration​

If you only want a line under a title, a CSS border-bottom is the better tool. It does not say "the topic changed" when nothing changed.

Mistake 3: Using deprecated attributes​

<!-- Outdated -->
<hr width="50%" size="4" noshade />

<!-- Modern -->
<hr style="width: 50%; border-top: 4px solid #000;" />

Mistake 4: Writing a closing tag​

</hr> is not valid. Void elements never have a closing tag.

Mistake 5: Using it instead of headings​

A line does not tell users what the next section is about. If the next part has its own subject, give it a heading.

Try It Yourself​

Here is a small exercise.

  1. Create a file called travel-diary.html.
  2. Write two short paragraphs about a place you visited or want to visit.
  3. Add a third paragraph about a different day or a different place.
  4. Place an <hr /> between the parts where the story changes.
  5. Add a CSS class that makes your line 40% wide, centered, and dotted.
  6. Remove the <hr /> and read the text again. Is the change still clear?

Quick Recap​

Click a question to check your answer.

1. What does <hr /> represent in modern HTML?

A thematic break, meaning a shift in topic between blocks of content.

2. Does <hr /> need a closing tag?

No. It is a void element and has no content to wrap.

3. How should you change the width or color of a horizontal rule today?

Use CSS, such as width, border-top, and margin. The old HTML attributes are deprecated.

4. When is a heading better than <hr />?

When the next part is a new section with its own subject. A heading names that section, and a line does not.

5. Why should you not use <hr /> between every paragraph?

Too many breaks make each one meaningless, and screen readers may announce a separator every time.

Key Takeaways​

  • <hr /> marks a change of theme, not just a line on the screen.
  • It is a void, block-level element with no closing tag.
  • Style it with CSS. The old attributes are deprecated.
  • Use it sparingly, and prefer headings for new sections and CSS borders for decoration.
  • Choose visible colors and think about screen readers so every learner can follow your page.

Next, learn how to show importance and attention in your text with Strong and Bold.