LESSON 15

Div and Span

Learning objective: Group and wrap content when no semantic element fits.

Understand

<div> and <span> are generic containers with no meaning of their own.

<div> is a block container used to group larger chunks; <span> is an inline container used to wrap a few words. They carry no semantic meaning, so reach for them only when no semantic element fits — usually to attach a class for styling.

Analogy: A <div> is a plain cardboard box; a <span> is a highlighter around a few words.

See It in Action

Grouping with div and span:

<div class="card">
  <p>Price: <span class="amount">$9</span></p>
</div>
How it works: The <div> groups the card so it can be styled as a unit; the <span> wraps just the price so that part can be styled separately.

Try It Yourself

  1. Wrap a block of content in a <div class='box'>.
  2. Wrap a single word in a <span>.
  3. Note that <div> starts a new line but <span> stays inline.

Quick Quiz

What is the key difference between div and span?

Challenge

Create a small 'card' using a <div> with a <span> highlighting one detail.

Success condition: Your card groups content in a div and highlights one part with a span.