Horizontal Rule
The Horizontal Rule is used to separate content.
The Horizontal Rule, based on the <hr/> element, serves as a thematic break among runs of content and renders as a line.
Example
Horizontal Rule
Usage
Dos
- Use a Horizontal Rule for thematic breaks. Apply horizontal rules to visually separate distinct sections or concepts within a layout.
- Use a Horizontal Rule only when spacing is not enough. If elements can be clearly separated using white space (e.g., headings with built-in margins), avoid adding horizontal rules—they’ll be redundant.
- Use Horizontal Rules sparingly for grouping. Horizontal rules can help group related content, but should not be used to divide individual items.
Don'ts
- Do not use a Horizontal Rule between short or closely related elements—they can create unnecessary visual clutter.
- Don’t replace white space with Horizontal Rules. They should not be used as a substitute for thoughtful spacing. When unsure, prioritize white space or use headings to establish structure.
Accessibility
- Horizontal rules are announced in screen readers, so use them sparingly and not for decoration.
- Do not use a Horizontal Rule to separate content where a heading (that explicitly labels the ensuing content) is more appropriate.