This topic is part of Level 4 Web Development. Here we meet the two generic
containers, <div> and <span>, that you reach for when no
semantic element fits the job.
The two generic containers
<div> and <span> are both generic containers: they group
content but carry no meaning of their own. The difference between them is how they flow in the page.
<div> is a block-level grouping element: it starts on a new
line and takes the full width available.
<span> is an inline element: it flows within the surrounding
text and only takes as much width as its content needs.
Because both are generic, you should use them only when no semantic element (such as
<header>, <article>, or <nav>) fits.
They exist to give you a hook for grouping and styling.
Try it: div vs span
The <div> below groups a heading and a paragraph into one block. The
<span> wraps a few words inside a sentence without breaking the line.
Copy the HTML into your file, add the CSS in a <style> block (or a separate
stylesheet), and open it in a browser. The <div> box spans the full width on its own
line, while the <span> stays tucked inside the paragraph.
Key points
Block vs inline: a <div> starts on a new line and stretches full
width; a <span> sits inline within the text.
Use a <div> to group a set of blocks (a heading, paragraphs,
lists, and so on) into one unit.
Use a <span> to mark a run of text within a line, so you can
style or target it later.
Exercises
Exercise 1 - Group related content into a div
Preparation: re-read "The two generic containers" above and
note what makes <div> block-level.
You have a heading, a paragraph, and a list that all belong together (for
example, a recipe title, a short description, and its ingredients). Wrap all three in a single
<div> so they form one group.
Try it in: your editor or CodePen. Starter:
<div> … </div> around the three elements.
Hint 1 - direction
Put the opening <div>
before the heading and the closing </div> after the list.
Hint 2 - partial solution
The <div> wraps
all three elements, not just one of them.
Hint 3 - full solution
Check your work: one opening <div> and one
closing </div> enclose the heading, the paragraph, and the list together.
Exercise 2 - Highlight part of a sentence with a span
Preparation: re-read the point about <span>
being inline.
Write a short paragraph and wrap a single word or phrase in a
<span>, ready to be styled later. For example, mark the word "essential" in
"HTML is essential for every web page."
Try it in: your editor or CodePen. Starter:
<p>HTML is <span>…</span> for every web page.</p>
Hint 1 - direction
The <span> goes
inside the paragraph, around only the words you want to mark.
Hint 2 - partial solution
Open the <span>
before the word and close it with </span> straight after the word.
Hint 3 - full solution
Write
<p>HTML is <span>essential</span> for every web page.</p>.
The sentence still reads on one line, but you now have a hook to style "essential"
separately.
Check your work: the <span> sits inside the
sentence and the paragraph reads normally on a single line.
Exercise 3 - Predict which one starts a new line
Preparation: re-read the "Block vs inline" key point.
Without running any code, predict: if you place a <div> and
a <span> side by side in a page, which one starts on a new line - the div, the
span, or both? Explain why in one sentence.
No code needed - answer in a sentence, then check in the
browser.
Hint 1 - direction
Think about which one is
block-level.
Hint 2 - partial solution
Block-level elements take a new
line; inline elements do not.
Hint 3 - full solution
The <div> starts on
a new line because it is block-level; the <span> does not
because it is inline and flows within the text.
Check your work: you said "the div" and linked it to being
block-level.
Exercise 4 - Fix the misuse of span and div
Preparation: recall that <div> groups
blocks, while <span> marks a run of text.
This code uses <span> to wrap a heading and a paragraph -
the wrong choice, because a span is inline and should not contain whole blocks. Replace the
<span> with the correct element and explain your fix.
Try it in: your editor, then reload the page in the
browser.
Hint 1 - direction
The element needs to group
blocks, not a run of text.
Hint 2 - partial solution
Which of the two containers is
block-level?
Hint 3 - full solution
Change the opening
<span> to <div> and the closing </span> to
</div>:
A <div> is the correct wrapper because it is block-level and can contain a
heading and a paragraph; a <span> belongs around a run of text inside a
line.
Check your work: the heading and paragraph are now wrapped in a
<div>, not a <span>, and you can explain why.