HTML div and span Elements - Block vs Inline
Understand the difference between div and span elements in HTML, when to use each, and how they affect page layout.
div vs span: Block and Inline Containers
The <div> and <span> elements are generic containers in HTML. They have no semantic meaning on their own - they exist purely to group content for styling or scripting purposes.
Key Difference
| Feature | <div> | <span> |
|---|---|---|
| Display | Block-level | Inline |
| Behavior | Takes full width, starts new line | Only as wide as content, stays in flow |
| Can contain | Block & inline elements | Inline elements & text only |
| Use case | Layout sections, card containers | Styling words within text |
The <div> Element (Block Container)
<div class="card"> <h2>Card Title</h2> <p>Card content goes here.</p> <button>Read More</button> </div> <!-- Divs stack vertically by default --> <div>I take full width</div> <div>I'm on the next line</div>
The <span> Element (Inline Container)
<p> The price is <span class="price">$29.99</span> for <span class="highlight">premium members</span>. </p> <!-- Spans stay inline --> <span>I stay</span> <span>on the same line</span>
When to Use div vs span
Use <div> when you need a container for layout purposes - wrapping groups of elements, creating grid/flex containers, building cards, sections, or sidebars.
Use <span> when you need to style or target a specific piece of text within a paragraph or inline context - highlighting words, adding tooltips, or applying classes to text fragments.
Prefer semantic elements over generic div/span when possible. Use <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> instead of divs when the content has semantic meaning.
CSS Display Property
You can change the display behavior of any element with CSS:
/* Make a span behave like a block */ span.block { display: block; } /* Make a div behave like inline */ div.inline { display: inline; } /* Inline-block: inline flow, but accepts width/height */ span.tag { display: inline-block; padding: 4px 8px; }
Last updated: 2026 • Browse all courses