hr
The HTML <hr> element marks a thematic break between parts of a document. It is not just a request to draw a decorative horizontal line.
What you will learn
- What content-level break
hrrepresents - How to write it as a void element with no closing tag
- How to distinguish a meaningful break from a decorative border
Basic syntax
<h2>Ingredients</h2>
<p>Prepare the ingredients first.</p>
<hr>
<h2>Method</h2>
<p>Follow these steps to prepare the dish.</p>hr is a void element. It has no closing tag and no child content. Place it where the topic or scene changes, not merely wherever a visual gap is convenient.
hr is about meaning
Use hr when the surrounding content remains one larger piece but its topics or scenes are divided. For a new independent article or a new major section, a heading or a structural element may communicate the relationship better.
Style it with CSS
hr {
border: 0;
border-top: 1px solid currentColor;
opacity: 0.35;
margin-block: 2rem;
}Keep the HTML choice based on meaning and use CSS for color, thickness, spacing, or other visual treatment. Do not use an empty element or a row of hyphens just to create a line.
Common mistakes
- Adding
hrbetween every paragraph as a decorative separator. - Writing an invalid closing tag such as
</hr>. - Using it instead of a heading when a new topic needs a name.
- Using a border or background purely for decoration when no thematic break exists.