The div element

Definition

div is a generic flow-content container. It is appropriate when a group needs a layout, styling, or scripting boundary and no element with useful semantics fits. A generic container is not an accessibility failure; choosing it before considering the content's real role is the failure.

Minimal syntax

<div class="card-grid">
  <article>...</article>
  <article>...</article>
</div>

The grid needs a layout wrapper, while each self-contained item is an article. The div handles arrangement without claiming that the wrapper itself is a section, navigation region, or list.

Semantic alternatives

Use main, nav, header, footer, or aside for matching landmarks. Use a headed section when the content forms a thematic section, article when it can stand independently, and ul or ol when the items are genuinely a list. Do not choose section merely because a design contains a rectangular box.

Browser and accessibility behavior

A plain div creates a block-level box by default but has no special keyboard or accessibility behavior. CSS can change its display type without changing its meaning. Adding an ARIA role can create semantics, but a native element normally provides a more complete and maintainable contract when one exists.

Common failures

• A page is built entirely from div elements and loses headings, landmarks, lists, links, and controls.
• A clickable div imitates a button without keyboard activation or state.
• Visual CSS order contradicts source order inside a generic layout wrapper.
• Deep wrapper nesting exists only to repair brittle selectors.

Verification checklist

Disable CSS and read the document from top to bottom. Confirm meaningful groups still have headings and native structure. Inspect the accessibility tree for missing landmarks, lists, or controls. Ask of every div: is this only a box, or does the content have a role? Keep the box when it is genuinely generic; replace it when a native element states the relationship.