Content Models and When div/span Are Right

## The two elements that mean nothing Almost every element in HTML tells a consumer something: `<p>` says paragraph, `<nav>` says navigation, `<button>` says activatable control. `div` and `span` are the two elements defined to say nothing at all. The specification describes `div` as an element with "no special meaning at all" and `span` likewise as a generic wrapper. That is not a defect — it is the escape hatch the language needs so authors are not forced to abuse a meaningful element for a grouping that has no meaning. Both are mapped to the ARIA `generic` role, so they add nothing to the accessibility tree. A screen-reader user gets no information from either. ## div vs span is a content-model decision The real difference is what each is allowed to contain, and where each is allowed to appear: - `div` has a content model of **flow content** — nearly anything that can live in the body: headings, paragraphs, lists, tables, other divs, and text. - `span` has a content model of **phrasing content** — the text-level subset: text nodes, `a`, `em`, `strong`, `code`, `img`, `br`, and other spans. Because phrasing content is itself a subset of flow content, a `span` can go anywhere a `div` can, but not the reverse. A `span` is valid inside a `<p>`; a `div` is not, because `p` only accepts phrasing content. ```html <!-- valid: span is phrasing content, so it belongs inside a paragraph --> <p>Total: <span class="amount">42</span> items</p> <!-- invalid: div is flow content and p only accepts phrasing content --> <p>Total: <div class="amount">42</div> items</p> ``` A common misreading is that this is about being "block" or "inline". Those are rendering concepts controlled by the stylesheet, and changing how an element renders does not change its category in the HTML content model. A `span` you render as a block is still phrasing content, and a `div` you render inline is still flow content and still invalid inside a `<p>`. ## When a wrapper is genuinely correct Legitimate uses of `div` and `span`: - A grouping that exists purely for layout or for a style hook, and that names nothing in the document's structure — a row, a column, a card shell around content that already carries its own semantics. - A hook for scripting or for a `data-*` attribute on a chunk of content that has no better home. - Marking a fragment of text so it can be styled or targeted — highlighting a substring, wrapping a currency symbol, isolating a word. Illegitimate uses — where a real element exists: - A clickable `div`, when `<button>` gives focusability, Enter/Space activation and a button role for free. - A `div` per row of a bulleted list, when `<ul>`/`<li>` conveys the list and its item count. - A `div` with large text acting as a title, when `<h2>` puts the title in the document's heading structure. - A `span` used for emphasis, when `<em>` or `<strong>` conveys it. The rule of thumb interviewers want to hear: **choose the element that describes the content; fall back to `div`/`span` only when no element does.** The generic element is a last resort, not a default. ## Why "div soup" is a real cost, not a style opinion When semantics are replaced by generic wrappers, three things quietly disappear. First, behaviour: a real control comes with keyboard activation and form participation you would otherwise have to rebuild. Second, structure: assistive technology navigates by headings, landmarks and lists, and a page of divs offers no landmarks to jump to. Third, resilience: consumers other than your own stylesheet — reader modes, translation tools, search crawlers, future maintainers — read the element names, not the class names. None of that says wrappers are bad. A page will legitimately contain many divs. It says a `div` should be the answer to "there is no element for this", and never the answer to "I did not check whether there is one". ## Practical check Before writing a wrapper, ask what you would call the thing out loud. If the answer is a word HTML already knows — list, paragraph, heading, navigation, button, table, quote, form field — use that element. If the honest answer is "a box" or "a bit of text", `div` and `span` are exactly right, and using them is not a compromise.