Div and Span: Boxes with No Meaning

Div and span are plain boxes that say nothing about what they hold, so you use them to group or style content only when no meaningful element fits, and you learn to spot the "div soup" that happens when they're used for everything.

Apprentice · HTML · Updated

After this lesson you can

  • Use div and span as boxes for styling or grouping when no meaningful element fits
  • Tell a block element from an inline one, the way a div starts on its own line and a span stays in the sentence

Key takeaways

  • A div and a span are boxes with no meaning. They group content so CSS can style it, and say nothing about what's inside.
  • A div is block, so it starts on its own line. A span is inline, so it stays inside the sentence.
  • Reach for a meaningful element first, such as nav, article, h2 or strong. Use a div or span only when none fits.
  • A page built only from divs is called div soup. Screen readers, search engines and other developers can't tell its parts apart.

Right-click almost any big website, choose Inspect, and you'll see <div> after <div> after <div>. Some are there for a good reason; many are leftovers from before HTML had elements like <nav> and <article>. At work, cleaning up those pages, or styling a page without breaking its meaning, is a common job. This lesson shows the two boxes HTML gives you for "nothing else fits", and how to tell when that's true.

Boxes with no labels

When you move house, you pack things into boxes and write on them: Kitchen, Books, Bathroom. The labels tell the movers where each box goes without opening it. Now picture a stack of plain boxes with nothing written on them. They still hold your things together, but nobody knows what's inside until they open each one.

HTML's semantic elements are the labeled boxes: <nav> says "menu", <article> says "a story". <div> and <span> are the plain ones.

  • <div> (read "div", short for division) is a box for a chunk of the page.
  • <span> (read "span") is a box for a few words inside a line of text.

Neither one means anything. A screen reader says nothing special about them, and a search engine learns nothing from them. They're there so you can group content, usually to give it a style with CSS.

A div starts its own line; a span stays in the sentence

Here's the big difference between the two:

<div>Lego Builders Club</div>
<div>Saturday, 10 a.m.</div>
<p>Meet in the <span>children's room</span> on the first floor.</p>

The browser shows three lines. Each <div> starts on a new line and takes the whole width of the page, so the two divs stack. The <span> doesn't break the sentence: "children's room" stays right where it is, inside the paragraph.

There are names for these two ways of sitting on the page:

  • A block element starts on its own line and stretches across the whole width: <div>, <p>, <h1> to <h6>, and the regions <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>.
  • An inline element sits inside a line of text, and takes only as much room as its words: <span>, <a>, <strong>, <em>.

In your textbook these may be called block-level and inline elements. CSS can change how any element sits (the CSS in Depth course covers that), but these are the defaults every browser starts with.

When a div is the right choice

A div is right when you need to group things for layout or style, and the group isn't a menu, a story, a section with a heading or any other part with a meaning. A common case is a wrapper that lets CSS line up three cards in a row:

<section>
  <h2>Upcoming Events</h2>
  <div class="event-cards">
    <article><h3>Lego Builders Club</h3><p>June 3, 4 p.m.</p></article>
    <article><h3>Teen Game Night</h3><p>June 5, 6 p.m.</p></article>
    <article><h3>Intro to the 3D Printer</h3><p>June 10, 11 a.m.</p></article>
  </div>
</section>

The <section> and the <article>s carry the meaning. The <div> in between means nothing, and that's fine: its only job is to give CSS one box to turn into a row. The class attribute names it, so the stylesheet can find it.

When a span is the right choice

A span is right when a few words need a style, and no element says what they are. A "New" badge on a headline, or a price you want in color:

<h3>Teen Game Night <span class="badge">New</span></h3>
<p>Library tote bags are <span class="price">$4.50</span> at the front desk.</p>

Before you reach for a span, check for an element with a meaning. If the words are important, like a warning, that's <strong>. If they're stressed, the way you'd say them aloud, that's <em>. A span is for looks only.

Try it. Make a file named cafe.html with the page skeleton. Write a paragraph about a coffee shop's special, and wrap the drink's name in a <span> and the whole special in a <div>. Open it with Live Server: the div starts a new line, and the span stays in the sentence. Then press F12 (Cmd+Option+I on a Mac), find the span in the Elements panel, and in the Styles pane click inside element.style and type color: brown; (a line of CSS that colors text). Only the drink's name changes color: that's what spans are for.

Div soup, and why it hurts

When a page uses divs for everything, developers call it div soup. Here's the Maple Street Library's page as it was first built:

<div id="header">
  <div class="site-name">Maple Street Library</div>
</div>
<div class="nav"><a href="#news">News</a> <a href="#events">Events</a></div>
<div id="main">
  <div class="news-item">
    <div class="headline">Summer Reading Challenge starts June 1</div>
    <p>Read five books by August 15 and earn a free tote bag.</p>
  </div>
</div>
<div id="footer"><p>214 Maple Street. Phone: 555-0142.</p></div>

It looks fine in a browser once CSS styles it. But the names only live in id and class values, which nobody but the stylesheet reads:

  • A screen reader finds no landmarks to jump to and no headings to list. "Maple Street Library" and "Summer Reading Challenge starts June 1" are read like any other text.
  • A search engine can't tell the news from the menu or the small print.
  • The next developer has to read every id and class to work out what's what, and match up a wall of </div></div></div> to see where each part ends.

The fix is the habit this chapter teaches: for each box, ask "is there an element that says what this is?" Use it if there is. Keep a <div> or <span> only where the answer is no. That is what semantic HTML means: choosing elements for what their content is, not for how it looks.

Check yourself

2 questions to try on the lesson page.

So what

Div and span are the tools for "nothing else fits", and they're worth having. Use them last, after the elements with a meaning, and your pages make sense to people, screen readers and search engines alike.

Key terms

Cheat sheets

Related