<hr> Thematic break
A change of topic between paragraphs, drawn as a horizontal line.
<hr> is a void element for a thematic break, a shift of topic or scene like the gap between scenes in a story. Browsers draw it as a horizontal line.
For a purely decorative line, use a CSS border. The old attributes size, noshade and width are obsolete, and CSS replaces them as well.
The hr element section of the WHATWG standard (opens in a new tab) describes it as a paragraph-level thematic break. When a break carries meaning is discussed in the semantic HTML guide.
Void element: it has no content and no closing tag.
Syntax
<p>First topic.</p>
<hr>
<p>Next topic.</p>When to use it
An hr marks a shift in topic that does not call for a new heading: between scenes in a short story, between unrelated notices on an announcements page, between a letter and its postscript. The standard now also allows it between groups of options in a long dropdown menu.
If the new part deserves a title, start a new section with a heading. The heading already marks the change, and an extra hr only adds noise. For a purely decorative line, such as one under every heading, use a CSS border-bottom, because assistive technology announces an hr as a separator.
An hr cannot sit inside a paragraph. Write one between two sentences of the same <p> and the parser closes the paragraph at the hr. The text after it ends up outside any paragraph, and a stray empty one appears where the end tag was. Any class or style on the paragraph then stops at the line.
Live example
Edit the code and watch the preview.
<p>The rain stopped and we went home.</p>
<hr>
<p>Three years later, the village had changed completely.</p>More examples
A styled scene break
In a story, the hr marks a jump in time or place. CSS replaces the default grey line with a short dashed rule centered on the page. The meaning stays the same: a thematic break between two scenes.
<style>
hr{border:0;border-top:2px dashed #999;width:40%;margin:2em auto}
</style>
<p>The last train left without her. Ana sat on the bench until dawn.</p>
<hr>
<p>Ten years later, she owned the bakery across from the station.</p>Separators in a dropdown
The HTML standard now lets hr appear inside <select> to separate groups of options. Recent browsers draw it as a line in the open list; browsers without support simply ignore it, and the menu still works.
<label for="size">Cake size</label>
<select id="size" name="size">
<option>Small (6 people)</option>
<option>Medium (10 people)</option>
<hr>
<option>Custom size</option>
</select>Tip: hr marks a change of topic. Decoration is a job for CSS borders.
Browser support
The hr element has been around in every browser since the early days of HTML. HTML5 changed its meaning from a purely visual rule to a thematic break, and the rendering stayed exactly as it was. Using hr inside <select> is a newer addition that recent browsers show as a line and older ones ignore.
Accessibility
Assistive technology exposes hr as a separator, so save it for real breaks and draw decorative lines with CSS borders. WAI-ARIA 1.2 (opens in a new tab) defines the separator role it maps to.
Common mistakes
Wrong
<hr width="50%" color="red" size="3">Right
<hr class="divider">The presentational hr attributes are obsolete. Style it in CSS.
Wrong
<h2>Prices</h2>
<hr>Right
<h2 class="underlined">Prices</h2>A decorative line under a heading marks no change of topic. Draw it with a CSS border.
Frequently asked questions
What does the hr tag mean in HTML5?
A thematic break between paragraph-level elements: a scene change in a story, say, or a move to a new topic within a section. That meaning is what separates <hr> from a plain decorative line. Browsers still draw a line by default, and screen readers may announce it as a separator.
How do I style an hr line with CSS?
The old size, width, color and noshade attributes are obsolete, so it all happens in CSS. A rule like hr{border:0;border-top:2px solid #ccc;margin:2em 0} does the job. Resetting the border first gets rid of the default inset 3D look, and every browser then shows one clean line.