<div> vs <span>
<div> is a block-level container with no meaning, and <span> is its inline counterpart. Both exist only for grouping and styling, never to describe content.
Side-by-side comparison
#Default display
Starts a new line
Respects width, height and margin-top/bottom
Can contain block-level elements
Typical use
Example
#<div style="display: flex; gap: 12px; align-items: center;">
<div class="box">JS</div>
<div>
<strong>JavaScript course</strong><br>
Your progress: <span style="color: #34d399; font-weight: 600;">12 of 20</span> lessons
</div>
</div>Definition and usage
#Both elements are neutral: they mean nothing to the browser, to screen readers or to search engines. What sets them apart is their default display. <div> is block-level, so it starts a new line, stretches to the full width of its parent, and respects width, height and vertical margins. <span> is inline, so it flows within the text, doesn’t break the line, and its width and height are ignored until you change its display.
This carries over to the content they can hold. <div> accepts any flow content: paragraphs, lists, other <div> elements, even headings. <span> only accepts phrasing content, meaning text and other inline elements. Putting a paragraph or a list inside it is a mistake.
Before reaching for either of them, check whether a semantic element fits better. A group of content should often be a <section> or an <article>, and a piece of text <strong>, <em> or <mark>. <div> and <span> are left for the situations where none of those fit.
Syntax
#<div>...</div>
<span>...</span>More examples
#<p>
The <span style="width: 200px; height: 100px; background: #7c3aed;">span</span> element
has width and height in its style, but that doesn't work, because it's inline.
</p><p>
Now it works:
<span style="display: inline-block; width: 120px; height: 40px; background: #0ea5e9; color: #fff; text-align: center; line-height: 40px;">inline-block</span>
</p>display: inline-block combines both worlds: the element sits inline, but respects dimensions like a block.
Good practices
#- Always check first whether a semantic element fits, e.g.
<section>,<nav>or<strong>. - Don’t nest block-level elements, including
<div>, inside a<span>. - A pile of
<div>elements nested inside each other ("divitis") makes code harder to read. Each one should have a specific job.
Related entries
#- <div>A generic block-level container with no meaning, for grouping elements and styling.
- <span>A generic inline container with no meaning, for styling a piece of text.
- <section>A thematic part of a document, usually with its own heading.
- <article>Self-contained content that makes sense read or shared on its own.
- <strong>Text of great importance: a warning, key information.
Spotted a mistake or missing an example? Write to us.