HTMLCSSSemantic HTMLAccessibilityjunior level

Choosing Between div and span

the question

What is the difference between `div` and `span`, and when would you use each one?

what they're testing: The interviewer is checking whether you can separate HTML structure and semantics from CSS presentation.

a strong answer

div and span are both generic containers: neither describes what its contents mean. With normal browser styling, a div has display: block, so it forms a block in the layout. A span has display: inline, so it can sit within surrounding text.

Their HTML content models also differ. In ordinary use, a div accepts flow content such as paragraphs, headings, and other containers. A span accepts phrasing content, including text and elements such as links or emphasis. CSS can change either element's display, but that does not change which children HTML allows. For example, span { display: block; } changes the layout but does not make a div valid inside that span.

Use a more meaningful element whenever one fits. Choose a div for a generic wrapper around flow content, and use a span for a generic hook within phrasing content, often for styling, language, or scripting. If the content is a button, navigation region, or article, use the matching semantic element. Styling a div or span does not give it those semantics.

Where people slip

the tempting wrong answer, and what's actually true

A `div` is semantic because it represents a section, while a `span` is not semantic.
Both are generic containers with no inherent meaning. Use `section` or another suitable semantic element when the content actually has that meaning.
A `span` can contain only plain text.
A `span` can contain phrasing content, including elements such as links and emphasis, not just text.
Adding `display: block` makes a `span` identical to a `div`.
CSS can make them lay out alike, but the `span` still has a phrasing-content model and remains a different HTML element.
A `div` always starts on a new line.
Browsers normally give a `div` block display, but author CSS can override that behavior.

If they push further

Is a `div` valid inside a `span` if the span has `display: block`?

No. A `span` accepts phrasing content, and changing its CSS display value does not make a `div` valid content inside it.

When should you use `section` instead of `div`?

Use `section` for a standalone section with no more specific element, almost always identified by a heading. Use `div` for a wrapper with no semantic meaning.

What is the accessibility impact of using these generic elements?

They do not provide the semantics of controls or page regions, so native elements such as `button`, `nav`, and `article` should carry those meanings when applicable.

Sources

Now answer it yourself.

Reading a strong answer is easy. Producing one under pressure is the skill the interview tests. Gapmap grades your answer against the same bar an interviewer would.

was this useful?

beta

The interviewer part is in the works.

The diagnostic, personal maps, and AI mock interviews are being finished right now. The notes stay free either way. Leave an email and you'll get the first-cohort invite, plus a month of Pro when it opens.