Divider vs. Separator vs. Rule
/ <hr> · role="separator" /
also called separator, rule, horizontal rule, visual divider
A horizontal rule marks a change of topic in content, so HTML gives it the semantic <hr> element. A separator divides groups of controls or regions and can use role="separator" when no native semantic element fits. If the line is only visual styling, it is a CSS border and should not be announced as an element. SwiftUI Divider and AppKit separator menu items are the familiar macOS cousins.
If you called it…
…you meant a divider vs. separator vs. rule.
Anatomy — every part, named
- 1Thematic break (horizontal rule)
<hr>“Above that line break” can mean a horizontal rule: an <hr> marking a real change of topic between sections of content.
- 2Semantic separator
role="separator"“A vertical line break between those sections” is a semantic separator when it divides distinct regions or groups of controls.
- 3Decorative CSS border
border-block-start“Maybe add a vertical line divider” can be only decoration; use a CSS border with no separator semantics when it conveys no structure.
- 4macOS divider and separator item
Divider / NSMenuItem.separator()In macOS UI, SwiftUI calls the visual line Divider, while a line between menu command groups is an NSMenuItem separator item.
Prompt — paste into your agent
Choose the correct Divider, Separator, or Rule: use HTML <hr> for a semantic thematic break in content, role="separator" for a structural boundary between groups of controls, and a CSS border such as border-block-start for a purely decorative line. On macOS, use SwiftUI Divider for a visual division or NSMenuItem.separator() between menu-item groups.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my divider (hr, role=separator, border utilities). Rule out: the hairline doubling or vanishing on fractional zoom because 1px borders round differently; a decorative divider still announced by screen readers — decorative ones need aria-hidden, semantic ones role=separator; a flex parent stretching the divider when a fixed cross-size was intended; margin collapse eating the space around an hr. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <hr> | |
| ARIA | role="separator" | |
| CSS | border-block-start | decorative only |
| SwiftUI | Divider | |
| AppKit | NSMenuItem.separator() |