What is the difference between <div> and <span>?

What You'll Learn

Block-level vs inline elements
When to use <div> vs <span>
Visual examples

The Key Difference

The key difference is their display behavior:

<div> is a block-level element - takes full width, starts on new line
<span> is an inline element - only takes needed space, flows within text

Visual Example

index.htmlHTML

<!-- div: block-level, full width -->
<div style="background: lightblue;">
  This takes the entire row
</div>
<div style="background: lightgreen;">
  This starts on a new line
</div>

<!-- span: inline, within text -->
<p>The price is <span style="color: red;">$99</span> today.</p>

When to Use Each

Use `<div>` for:

Grouping larger sections of content
Creating layouts
Wrapping multiple elements
Container for CSS styling

Use `<span>` for:

Styling small pieces of text
Applying attributes to inline content
Wrapping words within paragraphs

Important Note

Both are generic containers with no semantic meaning. In modern HTML, prefer semantic elements when possible:

Instead of <div class="header"> use <header>
Instead of <div class="nav"> use <nav>

But <div> and <span> remain useful for pure styling purposes.