Detailed explanation
The <div> and <span> elements are generic HTML containers: they group content without giving it a specific semantic meaning. Their main difference is their default CSS display behaviour. A <div> has display: block, so in normal document flow it starts on a new line and its automatic width generally fills the available width of its containing block. A <span> has display: inline, so it stays within the surrounding text flow and occupies only the space its content needs. Neither element automatically communicates a role such as heading, navigation, or emphasis.
Use a <div> when you need to group related content for styling, layout, or JavaScript and no more meaningful HTML element fits. For example, <div class="card"><span class="badge">New</span> Product Title</div> creates a block container for a product card while keeping the badge alongside the title. The card can receive padding, a border, or a background; the badge can receive its own colour and font styling. A <span> is especially useful for targeting a word, label, or short phrase without introducing a block break.
Under the hood, the browser builds DOM nodes from both elements and creates layout boxes according to their computed CSS. A normal block box accepts width and height, while width and height do not apply to an ordinary, non-replaced inline box such as a default <span>. Inline content can also wrap across multiple lines. CSS can change these behaviours: display: block makes a span generate a block box, and display: inline makes a div participate in inline flow. However, changing display does not change HTML content rules: a span accepts phrasing content, while a div accepts flow content.
Interviewers usually expect you to distinguish default presentation from semantic meaning and valid structure. Avoid saying that a div always takes the full screen width or that a span can never have dimensions. Also explain that semantic elements such as <nav>, <article>, or <button> should be preferred when their meaning matches the content or interaction.
Key points to remember
- <div> and <span> are generic containers with no specific semantic meaning.
- <div> defaults to display: block and starts on a new line in normal flow.
- <span> defaults to display: inline and stays within the surrounding text flow.
- CSS can override their display behaviour without changing their HTML content rules.
- Use meaningful semantic elements instead when they accurately describe the content.
Common mistakes candidates make
- Claiming a div always occupies the full screen width rather than generally filling its containing block.
- Applying width and height to a default inline span and expecting them to size its box.
- Assuming changing a span to display: block makes nesting a div inside it valid HTML.
Likely follow-up questions
How can you give a span a width and height while keeping it inline?
Set display: inline-block, then apply width and height. It participates in inline flow while allowing its box to be sized.
Can a div contain a span, and can a span contain a div?
A div can contain a span because it accepts flow content, which includes phrasing content. A span accepts phrasing content, so placing a div inside it is invalid HTML even if the browser renders it.
When should you choose a semantic element instead of a div or span?
Choose a semantic element when its meaning matches the purpose, such as <nav> for navigation or <button> for an action. Generic containers are appropriate when you only need grouping or a styling hook without additional meaning.
Interview tip: Start with the default block-versus-inline distinction, explain the card-and-badge example, and then mention that CSS can change display behaviour.