The <hr> tag represents a thematic break — a shift to a new topic or scene. Browsers draw it as a horizontal line by default, but that line is just styling; the real meaning is "something changed here."
Syntax
<hr>Basic Example
<p>...end of the chapter on HTML basics.</p>
<hr>
<p>Next: an introduction to CSS.</p>Browser output: a plain horizontal line spanning the width of its container, sitting between the two paragraphs, with default margin above and below.
How It Works
<hr>is a void element — like<br>, it has no closing tag and no content.- The browser renders a default horizontal line via its built-in stylesheet, but you can restyle it completely with CSS
border/height— the visual line is not what makes it meaningful.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none in HTML5 — | Older presentational attributes like size, width, and noshade are obsolete; use CSS instead |
Real-World Example
<article>
<p>That wraps up the basics of Python syntax.</p>
<hr>
<p>Now let's move on to a completely different topic: working with files.</p>
</article>A genuine change of subject inside one long article — not just "I want a line here for decoration."
Common Mistakes
- Using
<hr>purely as a decorative divider line with no actual change in topic — that's a styling choice, not a structural one; a plain<div>with a CSS border is more honest - Using deprecated presentational attributes like
<hr size="2" noshade>instead of CSS to control appearance
Best Practices
- Reserve
<hr>for genuine topic or scene shifts within content - Style its appearance entirely with CSS — never rely on default browser styling for anything visually important
Accessibility Considerations
Screen readers announce <hr> as a separator, giving users a clear "the topic has changed" cue that a purely decorative line (styled with CSS on a <div>) would never provide.
SEO Considerations
Minor at best — it can help signal content segmentation within a long page, but it's not a meaningful ranking factor on its own.
Browser & Modern HTML Notes
HTML5 redefined <hr> from a purely presentational divider into a semantic thematic-break element, and dropped its old presentational attributes in favor of CSS.
Mini Practice
- Add an
<hr>between two genuinely different topics in a sample article. - Restyle an
<hr>with CSS to be a thick, colored line instead of the default thin gray one.
