div and span

Containers with no meaning

Most HTML elements say something about their content. A p is a paragraph, an h2 is a heading, a ul is a list. Sometimes you need a box that says nothing at all: you want to group some elements so you can style them together, or mark a few words so you can colour them. For that, HTML has two generic containers:

• div: a generic block container (a "division").
• span: a generic inline container.

On their own they do nothing visible. A div simply starts on a new line; a span just sits in the text. They become useful once you attach a class, an id or CSS to them.

div: grouping blocks

<div style="border:2px solid #7c3aed;padding:12px;border-radius:8px">
  <h2>Special offer</h2>
  <p>Buy two loaves, get a third free.</p>
</div>
<div style="margin-top:12px;border:2px dashed #059669;padding:12px">
  <p>A second, separate group.</p>
</div>

Each div is its own block: it starts on a new line and stretches across the available width. Here the div exists only so the heading and paragraph can share one border. Without CSS, you would see no difference from putting the heading and paragraph directly in the page.

span: marking part of a line

<p>The bread costs <span style="color:#dc2626;font-weight:bold">₹40</span> per loaf, or two for ₹70.</p>

The span wraps exactly three characters and leaves the sentence unbroken. If you had used a div, the price would have jumped onto its own line.

class and id

div and span become practical with the class attribute, which names the group so CSS can target it:

<div class="offer">
  <h2>Special offer</h2>
  <p>Buy two loaves, get a third free.</p>
</div>

<p>The bread costs <span class="price">₹40</span> per loaf.</p>

In CSS you would write .offer { … } and .price { … }. Many elements can share a class; an id must be unique on the page. Both are covered in detail in the CSS course.

Name classes after what the thing is (offer, price, warning), not how it looks (red-box, big-bold). Looks change; roles rarely do.

Reach for a meaningful element first

Because div and span carry no meaning, use them only when nothing more descriptive fits. Compare:

<!-- Weak: every box is a div -->
<div class="header"><div class="menu">…</div></div>
<div class="content">…</div>
<div class="footer">…</div>

<!-- Better: the elements say what they are -->
<header><nav>…</nav></header>
<main>…</main>
<footer>…</footer>

The second version gives screen readers landmarks and helps search engines understand the page. Ask yourself, in order:

1. Is this a paragraph, heading, list, table, figure, quote? Use that element.
2. Is it a region of the page (header, nav, main, article, section, footer)? Use that element.
3. Do I only need a hook for styling or scripting? Now use div (block) or span (inline).

This is sometimes called "divitis" when overdone: pages made of nested div boxes ten levels deep that no one can read.

Don't put a block inside an inline

A span should contain only inline content such as text, a, strong. Placing a div or p inside a span is invalid HTML and browsers handle it unpredictably. If you need a block inside, make the outer element a div.

Common mistakes

• Using div where a p, ul or nav exists. The page looks the same but means less.
• Using span to make a visual heading instead of an h2. Screen readers will not announce it as a heading.
• Layout-based class names like left-column-red.
• Duplicate id values on one page. Each id must be unique.
• Wrapping a div in a span. Inline containers cannot hold blocks.

Exercise

Write a product card: a div with class "product" containing an h3 for the name, a paragraph with the price in a span with class "price", and a paragraph of description.

<div class="product">
  <h3>Sourdough loaf</h3>
  <p>Price: <span class="price">₹120</span></p>
  <p>Slow-fermented for 24 hours with a crisp crust.</p>
</div>