Divs & Spans

<div> and <span> are the two most generic elements in HTML. They carry no semantic meaning on their own — their job is purely to group content so CSS or JavaScript can target it.

Concept 1 — The div element

<div> is a block-level container. It starts on a new line and stretches the full width of its parent. Use it to group chunks of content — sections, cards, columns — when no semantic tag fits better.

<div>
  <h2>About me</h2>
  <p>I'm learning HTML.</p>
</div>

<div>
  <h2>My projects</h2>
  <p>Here is what I've built so far.</p>
</div>

On its own, a <div> is invisible. It becomes useful once you attach a class or id attribute and style it with CSS.

<div class="card">
  <h2>Project title</h2>
  <p>A short description.</p>
</div>

Concept 2 — The span element

<span> is the inline equivalent of <div>. It sits inside a line of text without breaking the flow, letting you target a word or phrase for styling or scripting.

<p>
  My favourite language is <span class="highlight">HTML</span>.
</p>

Like <div>, it’s invisible until styled. The key distinction is layout behaviour:

	Display	Use for
`<div>`	Block — starts a new line	Sections, containers, layout
`<span>`	Inline — flows with text	Words, phrases, icons within text

Concept 3 — class vs id

Both <div> and <span> are almost always used with class or id attributes.

class — can be used on multiple elements. Use it for reusable styles (cards, buttons, labels).
id — must be unique on the page. Use it when you need to target one specific element (anchor links, JavaScript hooks).

<!-- class: reused on many elements -->
<div class="card">First card</div>
<div class="card">Second card</div>

<!-- id: unique, used once -->
<div id="main-header">Site title</div>

Rule: if you find yourself using the same id on more than one element, switch to class. Duplicate IDs break anchor links and JavaScript selectors.

Concept 4 — Nesting divs

Divs are commonly nested to build layout structures — a container div holds several child divs that become columns, cards, or rows once styled with CSS.

<div class="container">

  <div class="sidebar">
    <p>Navigation links here.</p>
  </div>

  <div class="main-content">
    <h1>Page title</h1>
    <p>Main article content here.</p>
  </div>

</div>

The indentation is just convention — it has no effect on the browser, but it makes nesting easy to follow.

Caution: deeply nested divs (often called “div soup”) make code hard to read and maintain. Before adding another <div>, ask whether a semantic tag like <article>, <section>, or <nav> would be more meaningful. (Covered in Unit 12.)

Concept 5 — Using span for inline highlights

A common use of <span> is marking up a word or number for a specific visual treatment that CSS will handle — a coloured badge, a price, a keyword.

<p>
  This item is <span class="price">$12.99</span> and ships in
  <span class="highlight">2 business days</span>.
</p>

<p>
  Status: <span class="badge badge-success">Active</span>
</p>

Without CSS, these spans look identical to plain text. The class names are hooks — the styling lives in your stylesheet.

Try it yourself

<body>

  <div class="card">
    <h2>Card one</h2>
    <p>This div groups the heading and paragraph into one block.</p>
  </div>

  <div class="card">
    <h2>Card two</h2>
    <p>
      Price: <span class="price">$9.99</span> —
      Status: <span class="badge">In stock</span>
    </p>
  </div>

</body>

Open this in a browser and inspect the elements using DevTools (F12). You’ll see the div and span boundaries clearly in the element tree.

Quick reference

Element	Display	Purpose
`<div>`	Block	Group block-level content
`<span>`	Inline	Target inline text or elements
`class="..."`	—	Reusable CSS/JS hook, multiple elements
`id="..."`	—	Unique CSS/JS hook, one element per page