Div vs Span: Difference Between Block and Inline Elements in HTML

<div> and <span> are two of the most commonly used tags in HTML. They don’t have any special meaning on their own, they’re mainly used as containers for styling or structure. The key difference is how they behave on the page.

Block vs Inline

Block elements (like <div>)

• Start on a new line
• Take up the full width available
• Can contain other block or inline elements

1<div>This is a block element</div>
2<div>This appears on the next line</div>

Inline elements (like <span>)

• Stay on the same line
• Only take up as much width as needed
• Usually used inside paragraphs or other text

1<p>This is a <span>highlighted</span> word inside a sentence.</p>

When to Use Each

Example

1<div class="card">
2  <h2>Product Title</h2>
3  <p>This is a <span class="price">$29</span> product.</p>
4</div>

Quick Tips

• Prefer semantic tags (<article>, <section>, etc.) over too many <div>s when possible.
• Use <span> only when you need to style or target a small part of text.
• Don’t use <div> or <span> if a more meaningful tag already exists.