Divs and Spans
Plain cardboard boxes. Endlessly useful, completely silent about what's inside.
Every element we've met so far says something about its content. <h2> says "I'm a section heading." <ol> says "order matters here." <blockquote> says "someone else said this."
Now meet the two elements that say nothing at all.
<div>: a plain cardboard box
When you're packing to move house, most boxes get labeled: "Kitchen," "Books," "Fragile." But you'll always have a few plain cardboard boxes too. They hold stuff together so it can be carried as one unit. The box itself doesn't tell you anything about what's in it.
<div> (short for division) is that plain box. It's a block element (remember shelves and books from Nesting and the DOM?) that groups other elements together:
<div class="product-card">
<h3>Ceramic Mug</h3>
<p>Holds 350 ml. Dishwasher safe.</p>
<p>$12</p>
</div>Why group them? Almost always, it's for CSS or JavaScript. You want to draw a border around the whole card, or lay three cards side by side, or hide the card when it sells out. The div gives you one handle to grab all of it at once. That's why you'll nearly always see a div wearing a class.
<span>: a sticky note on a few words
<span> is the inline version, a tiny box that fits inside a line of text. Think of it as a sticky tab you put on a few words in a book so you can find them later:
<p>Your order ships in <span class="highlight">2 to 3 days</span>.</p>The span doesn't change anything by itself. No bold, no italics, no meaning. It just marks "these words" so CSS can color them or JavaScript can update them (imagine that shipping estimate changing live as someone picks a delivery option).
So... when should I use them?
Here's the honest answer, and it's the most important sentence in this lesson:
Use div and span only when no other element describes your content.
Before you reach for a div, run through a quick checklist:
- Is it a paragraph? Use
<p>. - A list of things?
<ul>or<ol>. - The main navigation?
<nav>. - A blog post or product card that could stand alone?
<article>. - An important phrase?
<strong>or<em>.
Only if the answer to everything is "no, I just need a box for styling" does the div or span get the job.
Div soup
There's a name for pages built almost entirely from divs: div soup.
<!-- Div soup -->
<div class="header">
<div class="title">My Blog</div>
<div class="menu">
<div class="menu-item">Home</div>
<div class="menu-item">About</div>
</div>
</div>It can look perfectly fine in a browser once it's styled. But imagine a house where every single room is labeled "Room." The kitchen: "Room." The bathroom: "Room." You'd get there eventually, but you'd open a lot of wrong doors first.
That's exactly what this page is like for a screen reader, a search engine, or the developer who has to maintain it next year. There's no heading, no navigation, no list, no links. Just boxes. We'll fix this exact example properly in the very next lesson.
If you've already written some div soup, don't feel bad. Almost every developer has, and plenty of real websites are still full of it. Knowing it's a problem already puts you ahead.
Try it
HTML
CSS
Preview
Try it yourself
- Delete the CSS entirely and run it. The divs and spans vanish visually. See how they do nothing on their own?
- Put the CSS back, then add a third product card. It gets the border automatically, because it wears the same class.
- Look at the product cards and ask: is a card like this something that could stand on its own? Hold that thought for Semantic HTML.
Check your understanding
Up next
Time to label the rooms. Semantic HTML turns div soup into a page that anyone can find their way around. If you'd like to see how CSS grabs those classes, Intro to CSS gives you an early look.