vocab.design

component

Divider

also called separator (aria-apg), rule, horizontal rule, hr

A thin line separating groups of content, decorative when the grouping is already clear and semantic when it is the only cue.

A divider groups by separating. The line itself carries no information: what it does is tell a reader that the things above it and the things below it are two sets rather than one run. That makes it a grouping device with a negative signature, and it explains why dividers are so easy to overuse. A rule between every row does not create groups, it creates a table of one-item groups, and the eye stops reading the lines as meaningful at about the third one.

Space does the same job, usually better. If a generous gap already makes the grouping obvious, the line is decoration and can be deleted with nothing lost. The line earns its place where space is scarce (a dense menu, a settings list, a toolbar) or where the surface cannot afford the room that a convincing gap would take.

Whether a divider means anything to assistive technology is a decision, not an accident. Where the line is the only signal that the grouping exists, it should be exposed (role="separator", or an <hr>); where a heading, a landmark or a labelled group already says the same thing, the line is presentational and should be hidden, so a screen reader is not read a series of separators nobody needed.

Two variants show up often enough to name: an inset divider, which stops short of the container edge to align with the content rather than the box, and a vertical one, which needs an explicit orientation because assistive technology cannot see which way a one-pixel box is pointing.

Which word?

If you wantsay
a line that groups content by separating itdivider
the colour of borders and dividers as a named roleoutline color
the draggable bar between two resizable panessplitter
shading every other row of a tablezebra striping
the shared line every row's text starts onkeyline

Implementations

Specimens illustrate the concept; for production use, start here.

fluentDivider
base-uiSeparator
polarisDivider

Sources