div and span
<div> is a block container (starts on a new line); <span> is inline (stays in the same line). Use them to group elements and apply CSS or JavaScript.
Appy Says…
div and span are HTML's plain containers — no built-in meaning, just boxes. div is a block-level box, span is an inline box. They're the glue that holds layouts together and the hooks that CSS and JavaScript grab onto.
What are div and span?
<div> is a block-level container element — it starts on a new line and takes up full width. <span> is an inline container — it sits inside text flow without breaking it.
- •
<div>: block box — groups sections, layouts, components - •
<span>: inline box — wraps words or characters inside text - •Neither has visual meaning — appearance comes from CSS
- •
class/idattributes let CSS and JS target them - •Divs: wrap navigation, cards, columns, whole sections
- •Spans: highlight a word, change colour of one word, apply a tooltip
Think of it like Minecraft structure blocks
A div is like placing a large chest in a room — it sits on its own block. A span is like putting a torch on a wall — it fits in-line without taking a whole block. Both are containers; the difference is how they sit in the space around them.
How It Works
- •1.
<div class='card'>...</div>— block box, targeted via .card - •2.
<p>Click <span class='highlight'>here</span> to start</p>— inline box inside text - •3. CSS:
.card { background: white; border-radius: 8px; padding: 16px; } - •4. JS:
document.querySelector('.card')targets the div - •5. Nesting divs inside divs builds column/row layouts
- •6. Prefer semantic tags: <nav>, <section>, <article> beat plain divs when content has meaning
Real-World Examples
- •Every card on Netflix/TikTok/Spotify = a styled div
- •Highlighted price text = a span with a colour class
- •Navigation bar = a div (or <nav>) containing anchor tags
- •YouTube video grid = divs with CSS Grid applied
Key Facts
- •'Div soup' — deeply nested divs with no semantic meaning — hurts accessibility and readability
- •Screen readers cannot tell what a div means; prefer semantic tags for meaningful content
- •Spans are great for CSS animations on individual characters or words
- •React components render to a div by default unless you specify another element
Watch Out!
Don't wrap everything in divs. Use semantic HTML: <button> not <div class='btn'>, <nav> not <div class='nav'>, <h1>–<h6> not <div class='title'>. Semantic HTML improves accessibility, SEO, and readability.
Remember
div = block container (starts on new line). span = inline container (fits in text). Both are style/script hooks with no semantic meaning. Prefer semantic tags when the content has a meaningful role.
What You Learned
- •
<div>is a block container;<span>is an inline container — both have no default visual style - •Use class/id to target them with CSS and JavaScript
- •Unlocks: building any layout and targeting any element for styling or scripting
Key Facts
- →'Div soup' — deeply nested divs with no semantic meaning — hurts accessibility and readability
- →Screen readers cannot tell what a div means; prefer semantic tags for meaningful content
- →Spans are great for CSS animations on individual characters or words
- →React components render to a div by default unless you specify another element
Real-World Examples
Remember
div = block container (starts on new line). span = inline container (fits in text). Both are style/script hooks with no semantic meaning. Prefer semantic tags when the content has a meaningful role.
Quick Quiz
div is block or inline?