<div> (flow container) and <span> (phrasing container) are semantics-free hooks. Reach for them only after ruling out richer elements.
Legitimate uses
- Layout wrappers when CSS Grid/Flexbox requires grouping nodes.
- JavaScript hooks where no native component exists yet.
- Third-party embed scaffolding mandated by vendors.
Downsides of div soup
- Unlabeled wrappers confuse assistive tech—landmarks become ambiguous.
- Deeply nested
divtrees slow authoring and increase bundle sizes slightly.
Better alternatives
- Use
section/article/asidewhen grouping thematic content. - Use
main,nav,header,footerfor recurring regions. - Use
button/ainstead of clickable divs.
Accessibility bridges
When only div remains, add role, aria-label, or labelled-by references thoughtfully—and prefer visible text labels whenever possible.
Why “just one more wrapper” piles up debt
- Each anonymous
divis another node for layout calculations, SSR payloads, and screen reader verbosity if mis-landmarked. - Shadow DOM/Web Components still surface semantics through light DOM slots—you cannot hide sloppy structure forever.
When divs remain legitimate
- Non-semantic wrappers required by virtualization libraries or animation FLIP helpers.
- Third-party snippets you cannot refactor yet—fence them behind components with explicit tech-debt tickets.
Important interview questions and answers
- Q: What makes image delivery accessible and performant?
A: Meaningful `alt`, correct intrinsic `width`/`height`, and responsive sources (`srcset`/`sizes` or `picture`) based on viewport needs. - Q: When do you use a table in HTML?
A: Only for real tabular data, not page layout; use `th`, `scope`, and `caption` to preserve structure for assistive tech. - Q: What is the role of the `head` element in production apps?
A: It provides critical metadata like charset, viewport, title, canonical/social tags, and linked resources used by browsers and crawlers.
Pitfall: Div soup without landmarks hurts accessibility—prefer semantic elements.