In HTML, <hr> is a horizontal rule element that creates a visual and semantic break between sections of content, usually rendered as a horizontal line across the page.

Quick Scoop: What is <hr> in HTML?

  • <hr> stands for a thematic break , often used when the topic or scene changes between paragraphs or sections.
  • Browsers typically display it as a horizontal line that spans the width of its container, helping separate content blocks visually.
  • It is a void element : it has no content and does not use a closing tag (you write <hr> or <hr />, not <hr></hr>).
  • Common use cases today: dividing articles into sections, separating header from body, or visually splitting unrelated pieces of text.

Example:

html

<p>This is the first paragraph.</p>
<hr>
<p>This is the second paragraph, after a thematic break.</p>

How <hr> behaves in modern HTML

  • Semantic meaning : In HTML5, <hr> represents a thematic break between paragraph-level content, such as a topic shift or scene change, not just a random line.
  • Default appearance : Most browsers render <hr> as a full‑width, thin horizontal line with some vertical margin before and after it.
  • Accessibility : By default, it maps to a separator role, which can help assistive technologies understand it as a structural divider.

Styling <hr> with CSS

You almost always style <hr> with CSS instead of using old HTML attributes like width, size, or color. Basic styling example:

html

<hr class="section-break">



css

.section-break {
  border: none;
  border-top: 2px solid #ccc;
  width: 60%;
  margin: 2rem auto;
}

This turns the default line into a more polished, centered divider.

You can also get creative, for example adding a symbol in the middle:

css

hr.fancy {
  border: none;
  border-top: 3px double #333;
  color: #333;
  text-align: center;
  margin: 2rem 0;
}

hr.fancy::after {
  content: "§";
  background: #fff;
  padding: 0 0.5rem;
  position: relative;
  top: -0.8rem;
}

This kind of pattern is commonly showcased in HTML/CSS documentation.

Mini FAQ

1. Is<hr> still used today?
Yes. Even in 2026, it’s still part of HTML5 and is recommended when you want a semantic “thematic break,” instead of just drawing a line with a div.

2. Do I need</hr>?
No. <hr> is a void element, so it must not have an end tag.

3. How is it different from just adding a border to adiv?
A <div> with a border is purely visual, but <hr> carries semantic meaning as a separator, which can be helpful for screen readers and document structure.

Information gathered from public forums or data available on the internet and portrayed here.