The <hr> element represents a thematic break between paragraphs — a change of topic or scene — typically rendered as a horizontal line, and is a void (self-closing) element.

Syntax

<p>End of section one.</p>
<hr>
<p>Start of section two.</p>

Deep Dive Course

**`<hr>`** ("horizontal rule") semantically marks a **thematic break** — a shift in topic within a section, a scene change in a story, or a transition between distinct groups of content — and browsers render that break as a horizontal line by default. It's a **void element**, meaning it has no closing tag and no content (`<hr>`, not `<hr></hr>`). Like `<big>` and `<font>`, it used to be purely presentational in early HTML, but HTML5 redefined it with genuine semantic meaning.

1Understanding <hr>

`<hr>` ("horizontal rule") semantically marks a thematic break — a shift in topic within a section, a scene change in a story, or a transition between distinct groups of content — and browsers render that break as a horizontal line by default. It's a void element, meaning it has no closing tag and no content (<hr>, not <hr></hr>). Like <big> and <font>, it used to be purely presentational in early HTML, but HTML5 redefined it with genuine semantic meaning.

💡

Don't use <hr> purely for visual decoration between unrelated design sections — if you just want a styled divider line with no topic-break meaning, use a CSS border on a <div> instead.

editor.html

<article>
  <p>Chapter 1 content...</p>
  <hr>
  <p>Chapter 2 content...</p>
</article>

localhost:3000

2Practical Example

Here is a real-world application of <hr> showing how it is used in production HTML.

editor.html

<!-- Styling the default line via CSS -->
<style>
  hr { border: none; border-top: 2px dashed #ccc; }
</style>
<p>Before</p><hr><p>After</p>

localhost:3000

3Best Practices

Follow these guidelines when working with <hr>:

1. Use <hr> to indicate an actual thematic/topic break in content, not just decoration

2. Remember it's a void element — no closing tag or children

3. Use CSS borders on a styled <div> for purely decorative divider lines with no semantic break

⚠️

Tip: Don't use <hr> purely for visual decoration between unrelated design sections — if you just want a styled divider line with no topic-break meaning, use a CSS border on a <div> instead.

editor.html

<article>
  <p>Chapter 1 content...</p>
  <hr>
  <p>Chapter 2 content...</p>
</article>

localhost:3000

Examples

Example 01Basic Usage

<article>
  <p>Chapter 1 content...</p>
  <hr>
  <p>Chapter 2 content...</p>
</article>

Example 02Advanced Example

<!-- Styling the default line via CSS -->
<style>
  hr { border: none; border-top: 2px dashed #ccc; }
</style>
<p>Before</p><hr><p>After</p>

Best Practices

Use
to indicate an actual thematic/topic break in content, not just decoration
Remember it's a void element — no closing tag or children
Use CSS borders on a styled
for purely decorative divider lines with no semantic break

Interview Question

Is it correct to use <hr> just to add a decorative dividing line between two unrelated design sections of a page?▼

Hint: Think about what <hr> is semantically defined to represent versus pure visual decoration.

Not strictly — <hr> is defined to represent a genuine thematic break in the CONTENT (a topic change, a scene break), so using it purely for visual decoration between unrelated layout sections (like separating a header from a hero banner) misuses its semantic meaning, even though visually a line might be exactly what's wanted. For pure decoration with no content-break meaning, a styled <div> with a CSS border is the more correct choice, reserving <hr> for actual topic breaks within the text content.

Exercises

EasyPractice using <hr> in a real scenario.

View Solution

<article>
  <p>Chapter 1 content...</p>
  <hr>
  <p>Chapter 2 content...</p>
</article>

Frequently Asked Questions

Is it correct to use <hr> just to add a decorative dividing line between two unrelated design sections of a page?▼

Not strictly —

is defined to represent a genuine thematic break in the CONTENT (a topic change, a scene break), so using it purely for visual decoration between unrelated layout sections (like separating a header from a hero banner) misuses its semantic meaning, even though visually a line might be exactly what's wanted. For pure decoration with no content-break meaning, a styled

with a CSS border is the more correct choice, reserving

for actual topic breaks within the text content.

Related Functions

p-tagdiv-tag