The Two Generic Containers
Last lesson you met the semantic tags — <header>, <nav>, <main>, and friends — each carrying built-in meaning. But sometimes you just need a plain box to group things together, with no meaning attached. That's what <div> and <span> are for.
<!-- div: a block-level, generic container --> <div class="card"> <p>Some grouped content</p> </div> <!-- span: an inline, generic container --> <p>Price: <span class="price">$29</span></p>
- ✓<div> is block-level — it starts on a new line and takes up the full width available.
- ✓<span> is inline — it sits within a line of text without breaking the flow.
- ✓Neither tag has any semantic meaning on its own — that's exactly the point.
Grouping Blocks of Content
<div> is most useful when you need a wrapper purely for styling or layout purposes — a card, a grid cell, a container for a group of Flexbox items — and no existing semantic tag fits.
<div class="card"> <h3>Basic Plan</h3> <p>Great for getting started.</p> </div> <div class="card"> <h3>Pro Plan</h3> <p>For growing teams.</p> </div>
Basic Plan
Great for getting started.
Pro Plan
For growing teams.
Notice both cards use the same class="card" — that's how a single CSS rule can style every card identically, no matter how many you add.
Styling Part of a Line
<span> comes in when you need to target just a few words or characters within a larger block, without breaking the line they sit on.
<p> This course is <span class="hl">completely free</span> for the first 30 days. </p>
This course is completely free for the first 30 days.
Block-level — always starts on its own new line.
Inline — stays within the surrounding text flow.
Before reaching for a <div> or <span>, check if a semantic tag already fits — <article>, <section>, <strong>, <em>, and others often communicate more meaning for the exact same visual result.
Breaking Down What You Just Learned
<div>A generic, block-level container used for grouping and styling content with no built-in meaning.
<span>A generic, inline container used to target and style a small piece of text mid-sentence.
class attributeLets you apply the same CSS rule to multiple divs or spans at once.
Semantic-first thinkingReach for a meaningful tag first — divs and spans are the fallback, not the default.
Try It Yourself
Write a paragraph about your favorite hobby, and wrap one key word or phrase in a <span> with a class you invent. Then style that class with a different text color in a <style> block.
Build a Card Grid with Divs
Grouping content with div and span together
Create a new file called day10.html inside your course folder and build a simple pricing section.
- Start with the full DOCTYPE, html, head, and body structure.
- Add a <div class="card"> for each of three pricing plans: Basic, Pro, and Team.
- Inside each card, add a heading, a short description, and a price.
- Wrap each price in a <span class="price"> so it can be styled separately.
- Add a <style> block that gives all <div class="card"> elements a border and padding.
- Give <span class="price"> a bold font-weight and a different color than the rest of the text.
Recap
Generic block-level container for grouping larger chunks of content.
Generic inline container for styling a small piece of text.
Reusable hook that lets one CSS rule style many elements at once.
Check for a meaningful tag before defaulting to div or span.
Key Takeaways
- <div> is a block-level container with no semantic meaning of its own.
- <span> is its inline equivalent, used to target text within a line.
- Both rely on the class attribute to become reusable and stylable.
- Always check whether a semantic tag fits before reaching for a div or span.
- Div and span are tools for layout and styling — not for meaning.