Every HTML element behaves in one of two basic ways. Block elements stack on top of each other like bricks. Inline elements flow along inside a line of text like words in a sentence.
Knowing which is which explains a lot of "why is my layout doing that?" moments. It's why two paragraphs never sit side by side on their own, and why setting a width on a link seems to do nothing.
This lesson also introduces the two most used containers in HTML, <div> and <span>, and explains when to use them and when a more meaningful element is the better choice.
Block elements
A block element:
- starts on a new line
- stretches to fill the full width available
- can contain other block elements and inline elements
Examples: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <table>, <form>, <section> and <header>.
Because each block takes the whole width, blocks naturally stack from top to bottom. That's the default "flow" of a web page before any CSS layout is applied.
Inline elements
An inline element:
- sits inside a line of text, next to other content
- is only as wide as its content
- shouldn't contain block elements
Examples: <span>, <a>, <strong>, <em>, <img>, <code>, <input> and <button>.
Inline elements ignore width, height and top and bottom margins set in CSS. If you need those, change the element's display type, which you'll learn in CSS Display.
div and span: the generic containers
Sometimes no HTML element describes your content. Then you use a generic one:
<div>is a generic block container. Use it to group elements for styling or layout, such as a card or a row of buttons.<span>is a generic inline container. Use it to style a few words inside a sentence, such as a price or a highlighted name.
<div class="card">
<h3>Blue Mug</h3>
<p>Price: <span class="price">£12</span></p>
</div>Neither element has any meaning by itself. They become useful when you add a class and style them with CSS.
When to use a semantic element instead
Because <div> and <span> carry no meaning, always prefer a meaningful element when one exists:
<nav>instead of<div>for a group of navigation links<button>instead of a clickable<span><article>instead of<div>for a self-contained post or card
Pages built only from <div> elements, sometimes called "div soup", work visually but give screen readers and search engines no clues about the structure. You'll learn the meaningful alternatives in Semantic Elements.
HTML div and span Syntax
div and span
<div class="card">
<p>Price: <span class="price">£12</span></p>
</div>HTML div and span Summary
- Block elements start on a new line and fill the full width.
- Inline elements sit inside a line of text and are only as wide as their content.
<div>is a generic block container;<span>is a generic inline container.- Add a class to
<div>and<span>to style them with CSS. - Use a semantic element such as
<nav>or<button>whenever one fits.
HTML div and span Examples
Each example runs in the page. Edit the code and press Run to see what changes.
See the difference
Each element gets a coloured outline so you can see how much space it takes.
<div>I'm a div (block), so I take the full width.</div>
<div>Another div starts on a new line.</div>
<p>A paragraph with <span>a span</span>, <strong>a strong</strong> and <a href="#">a link</a>, all inline on the same line.</p>
<style>
div, p { outline: 2px solid tomato; margin: 6px 0; }
span, strong, a { outline: 2px solid royalblue; }
</style>Line-by-line explanation
- Lines 1 to 2Divs stack and stretch the whole width (red outlines).
- Line 3The inline elements (blue outlines) only take the space their words need.
- Lines 5 to 8CSS outlines make the boxes visible.
Grouping with div, styling with span
<div class="weather">
<h3>London today</h3>
<p>It's <span class="temp">14°C</span> and <span class="sky">cloudy</span>.</p>
</div>
<style>
.weather { background: #eef3ff; padding: 12px 16px; border-radius: 12px; max-width: 280px; }
.temp { font-weight: bold; color: #e5484d; }
.sky { color: #4467ff; }
</style>Line-by-line explanation
- Lines 1 to 4The
<div>groups a heading and paragraph into one "weather card" we can style. - Line 3Two
<span>s style individual words without breaking the sentence.
Common HTML div and span Mistakes
Putting a block inside an inline element
<span>
<h2>Title</h2>
</span><div>
<h2>Title</h2>
</div>Inline elements shouldn't wrap blocks. (One exception: modern HTML lets <a> wrap blocks, like a whole clickable card.)
Divs for everything ("div soup")
<div class="nav">…</div>
<div class="main">…</div>
<div class="button" onclick="buy()">Buy</div><nav>…</nav>
<main>…</main>
<button type="button" onclick="buy()">Buy</button>A <div> "button" can't be reached with the keyboard and isn't announced as a button. Use the real element.
HTML div and span in Real Projects
Containers in real layouts
Real sites use <div> as wrappers for layout: card grids, rows of columns, modal boxes. Designers then target them with classes in CSS. <span> is common for small badges, prices, icons and highlighted words. Later, CSS display lets you change whether any element behaves as block or inline.
HTML div and span Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Which of these is an inline element?
<span> flows inside text; the others are block elements.You want to colour one word red inside a sentence. Which element do you wrap it in?
<span> is the generic inline container, so the sentence isn't broken.Group the heading and paragraph into one block container, and wrap the price in an inline container.
< class="product">
<h3>Sprout Mug</h3>
<p>Only < class="price">£9</span></p>
</div><div> groups blocks; <span> wraps inline text.The "Buy now" control should be a real button so keyboard users can reach it. Replace the <div> with a <button type="button">.
<h3>Sprout Hoodie</h3>
<p>£35</p>
<div class="buy">Buy now</div>- There's a button saying "Buy now"
- No div pretending to be a button
- The button is type="button"
HTML div and span Quiz
3 questions to check what you learned.
Block elements start on a new line.
- True
- False
Which pair is generic (has no meaning of its own)?
<nav>and<a><section>and<strong><header>and<em><div>and<span>
How wide is an inline element by default?
- 100% of the page
- 50%
- As wide as its content
- It has no width
HTML div and span Challenge
Make a stats card
Create:
- A
<div class="stats">containing an<h3>and a paragraph - Inside the paragraph, wrap two numbers in
<span class="num">
- A div with class "stats" exists
- It contains an h3 and a paragraph
- Two span.num inside the paragraph
<span class="num">42</span>