<hr>: The HR Element

Last updated: 2026-10-13

<hr>The HR Element

The <hr> (horizontal rule) element represents a thematic break, rendered as a horizontal line by default. In HTML5 it signals a topic shift, often used to visually separate paragraphs. It's a void element.

Category	Text Content
Content Model	None (void element)
Allowed Parents	Any element that accepts flow content
Content Tag	Self-closing — no closing tag needed
Status	Standard

📝 Syntax

Paragraph one<hr>Paragraph two

See all global attributes → See all event attributes →

▶ Example

Edit the code below and see the live result in the playground:

▶ Try it

🌐 Browser Support

Browser	Chrome	Edge	Firefox	Safari	Opera
<hr>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
Supported in all major browsers

❓ FAQ

QIs hr just a horizontal line?

ANo — <hr> semantically marks a thematic break: a scene change in a story or a topic boundary. It renders as a horizontal rule by default, but purely decorative separators without that meaning should be CSS borders instead.

QIs hr a void element and can it be styled?

AIt is a void element: no end tag, no content. Styling is fully open: hr { border: none; border-top: 1px solid #ddd; } is the common reset, and width and gradients are all fair game.

QDo hr and section need to be used together?

ANo need to double up. With a <section> (a titled, grouped topic) you do not need an <hr> — the structure is the boundary. hr fits loose topic shifts without headings; they are tools of different granularity.

<hr> — paragraphs tutorial

📚 Related Tutorials

HTML Text Formatting HTML Paragraphs

HTML Paragraphs Tutorial

Learn paragraph separation.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us