Module 4: Structure and Semantics · Lesson 1 of 5
HTML div and span Tags: Difference and Examples
All lessons in Module 4
Goal: Wrap content in the generic div and span boxes.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
Now and then you want a box around some content for one reason only: so you can style or move it later. HTML gives you two generic wrappers (opens in a new tab) for that, and they carry no meaning at all.
<div>is a block box. It starts on a new line and can hold headings, paragraphs and other blocks.<span>is an inline wrapper. It sits inside a line of text, around a few words.
By themselves they change nothing you can see. What makes them useful is a class attribute, a label you make up, such as class="price". CSS (you will meet it in The style Element and Selectors) can then style every element that has that label.
They work like plain cardboard boxes. Handy for packing, though you need the label to know what is inside.
The short version
<div>wraps blocks and<span>wraps inline text. Neither adds meaning or any visible style.- A
classattribute gives them a label CSS can target. One element can carry several classes separated by spaces, likeclass="card featured". - Inside a paragraph, use
<span>and never<div>, because a paragraph may only contain inline content. - Use div and span when no meaningful tag fits. The HTML standard calls div an element of last resort.
Example
<div class="note">
<h3>Reminder</h3>
<p>Team lunch is at <span class="time">12:30</span> on Friday.</p>
</div>Your task
The cafe wants this menu item packed into a card that a designer can style later.
- Wrap the
<h2>and the<p>in one<div>withclass="card". - Inside the paragraph, wrap only the price
$4.50in a<span>withclass="price".
The preview won't change at all. That's fine. These boxes stay invisible until CSS styles them.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<p>Only
<div class="price">$4.50</div>
a slice.
</p>Right
<p>Only <span class="price">$4.50</span> a slice.</p>A div is a block and cannot sit in a paragraph, so the browser ends the paragraph early and the price lands on its own line outside it.
Wrong
<div class="title">Lemon Cake</div>
<div class="text">Fresh, zesty and fluffy.</div>Right
<h2>Lemon Cake</h2>
<p>Fresh, zesty and fluffy.</p>If a real tag describes the content, use it, because a div with a class name gives screen readers and search engines no heading or paragraph to find.
Go deeper
View the source of almost any website and you will find hundreds of <div>s. Most are there for layout. CSS needs a box to turn into a column, a card grid or a sticky bar, and that is a perfectly good use. The HTML Living Standard (opens in a new tab) asks only that you treat div as the element of last resort, for when no other element fits.
Browsers give a div display: block and a span display: inline by default, and that is all. Screen readers announce neither. Search engines read their text like any other text, with no extra weight. So a div styled to look like a heading only fools sighted readers: nobody can jump to it from a list of headings. Fix the Div Soup shows a whole page built this way.
Name classes after what the content is. class="price" still makes sense after a redesign turns prices green, while class="red-text" turns into a lie. The usual convention is lowercase words joined by hyphens, like class="menu-item", which is also quick to type.
Frequently asked questions
What is the difference between div and span in HTML?
Block versus inline. Both are generic containers without meaning, but <div> is a block element that starts on a new line and stretches across the available width. <span> is inline and wraps a few words inside a line of text without breaking it. Group bigger chunks, like a product card, with a div. Mark a word or phrase, like a price, with a span. Curious how far divs can go? A div table generator (opens in a new tab) shows them faking a grid.
Can I put a div inside a span?
No. A <span> may only contain inline content, which the HTML standard calls phrasing content (opens in a new tab): text, links, <strong>, other spans and so on. A <div> inside a span is invalid HTML. The reverse works fine, and a div can hold spans, paragraphs, headings and even other divs. If you find a block inside an inline wrapper, swap the two so the block is on the outside.
Should I use class or id on a div?
It depends on how many elements share the label. A class can appear on many elements, like every product card on a shop page. An id belongs to one element only, for example the target of a #section link, and the same id must never appear twice on a page. Styling mostly uses classes since you can reuse them. An element can also have both.