HTML div and span: Generic Containers

div and span have no meaning of their own. They exist to group things, usually so CSS or JavaScript can target the group.

div: a block container

index.html

HTML

<style>
  .card { border: 1px solid #e6ddd7; padding: 12px; border-radius: 8px; max-width: 280px; }
</style>
<div class="card">
  <h3>The Slow Garden</h3>
  <p>A quiet novel about a neighbourhood plot.</p>
</div>

span: an inline container

index.html

HTML

<style>
  .price { color: #b84624; font-weight: bold; }
</style>
<p>The Slow Garden is only <span class="price">$14</span> this week.</p>

Compare them

Feature	div	span
Type	Block	Inline
Use for	Groups of elements	A few words inside text

Prefer meaningful elements first

Before you reach for a div, ask whether a meaningful element exists. A group of navigation links belongs in nav. A standalone article belongs in article. You will meet these in Semantic HTML.

warning

Div soup

Pages built from nothing but nested div elements are hard to read and hard to use with assistive tools. Use div and span only when no meaningful element fits.

Exercise: a highlighted word

Write a paragraph in which one word is wrapped in a span with the class accent, and add CSS that colours .accent terracotta (#ca4b00).

Show a possible solution

index.html

HTML

<p>Reading is <span class="accent">fun</span>.</p>
<style>
  .accent { color: #ca4b00; }
</style>