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 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() |