<hr>
A thematic break in content, for example a scene change in a story or a shift to a different topic.
- Display
- block
- Closing tag
- None, void element
- Permitted content
- None, the element is void
Example
#<p>Kate saved the file, closed her laptop, and went to bed, sure that everything worked.</p>
<hr>
<p>In the morning she saw a blank white screen and one red error in the console.</p>Definition and usage
#The <hr> element marks a thematic shift between paragraphs: a scene change in a story, a jump in time, or a move to a different topic within one section. Browsers draw it as a horizontal line, hence the name, from horizontal rule.
This line carries meaning. Screen readers announce it as a separator, so don’t insert it purely for decoration. If you just need a plain line, add a border in CSS, e.g. border-top. Between sections that already have their own headings, <hr> is usually unnecessary, since the heading already signals the change of topic.
You change the look in CSS; by default it’s a thin, inset border. The old size, width, noshade, and align attributes are deprecated. Recently, <hr> can also separate groups of options inside a <select> list.
Syntax
#<hr>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<p>End of module one.</p>
<hr style="border: none; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f97316, #a78bfa);">
<p>Module two: forms.</p><label for="course">Choose a course</label>
<select id="course">
<option>HTML and CSS</option>
<option>JavaScript</option>
<hr>
<option>Python</option>
<option>Data analysis</option>
</select>You’ll see the line once you open the list. Older browsers will skip the <hr> and show only the options.
Default CSS
#Most browsers display this element with these default styles:
hr {
color: gray;
border-style: inset;
border-width: 1px;
margin-block: 0.5em;
margin-inline: auto;
overflow: hidden;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Don’t use
<hr>as a decoration. Draw a decorative line in CSS instead. - The easiest way to change the line’s color is to remove the border and give it a height and a background:
border: none; height: 2px; background: …. - Between sections that already have their own headings, a separator usually isn’t needed.
Related entries
#Spotted a mistake or missing an example? Write to us.