← HTML & CSS

Span: the inline container

A generic inline container with no built-in styling. Used to wrap part of a text flow so CSS can target and style that portion of the text.

Part of: HTML and CSS Journey — Module 21, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 22

Understanding Span: the inline container in HTML & CSS

What it does: <span> wraps '$42' without breaking the paragraph. The price stays inside the sentence flow. id="badge" gives this span a unique hook for CSS. Without CSS, <span> renders exactly like the surrounding text. <span> has no built-in visual styling. All appearance must be added with CSS targeting its class or id. <span> is an inline element - it must live inside a block container like <p>, <h1>, or <li>. HTML tag names must be lowercase. <SPAN> is non-standard - use <span>. <span> does not break the line. class="name" lets CSS apply colour, font weight, or any style to just that word.

Common mistakes: HTML tag names must be lowercase. <SPAN> should be written as <span>. The span closing tag is missing its forward slash. It should be </span> not <span> at the end.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Span: the inline container to a class →

This module's key terms are also in a printable crossword (Modules 11–21) and crossword (Modules 21–30) and word search (Modules 1–23) and word search (Modules 21–41).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Is <span> a block-level or inline element?
InlineBlock-level
Matches
<SPAN class="tag">Sale</SPAN>
↓
Tag names must be lowercase - <SPAN> and </SPAN> should be <span> and </span>
Applying
Meanings
Term
<span>
Meaning
A generic inline container with no built-in styling. Used to wrap part of a text flow so CSS can target and style that portion of the text.
Practice
<p>The price is
Testing
Gaps
<p>Hello, < class="name">Alice</span>.</p>
Check Answer
Spots
1<SPAN class="highlight">word</span>
2<p>More text.</p>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Anglerfish' badge — Deep Diver, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Is <span> a block-level or inline element?
A. Block-level
B. Inline ✓
<span> stays within the text flow and does not start a new line. Use <div> for block-level grouping.
2. True or false: <span> adds visible styling like colour by default.
A. False ✓
B. True
<span> has no built-in visual styling. All appearance must be added with CSS targeting its class or id.
3. Where must a <span> be placed?
A. Inside a block element like <p> or <h1> ✓
B. Outside all block elements
<span> is an inline element - it must live inside a block container like <p>, <h1>, or <li>.
4. True or false: <SPAN> with capital letters is valid HTML.
A. False ✓
B. True
HTML tag names must be lowercase. <SPAN> is non-standard - use <span>.
5. What is the key difference between <span> and <div>?
A. <span> is block-level; <div> is inline
B. <span> is inline; <div> is block-level ✓
<span> wraps inline content without breaking the flow. <div> creates a block that starts on a new line.

Match the Pairs

<p>Hello, <span class="name">Alice</span>!</p> → Wraps 'Alice' inline - <span> keeps it in the text flow and CSS targets .name to style it
<p><span class="red">Error:</span> file not found.</p> → Styles only 'Error:' inline - the rest of the paragraph is unaffected by the .red CSS rule
<span> is an inline container - it stays in the text flow without starting a new line → <p>Total: <span class="price">$42</span> AUD.</p>
<span> has no built-in styling - all appearance comes from CSS targeting its class or id → <p><span id="badge">New</span> product.</p>
<SPAN class="tag">Sale</SPAN> → Tag names must be lowercase - <SPAN> and </SPAN> should be <span> and </span>
<p>Label: <span class="val">10<span></p> → The closing tag is missing its forward slash - it should be </span> not <span>

Key Term

<span>
A generic inline container with no built-in styling. Used to wrap part of a text flow so CSS can target and style that portion of the text.

Fill in the Blanks

1. <p>Hello, <span class="name">Alice</span>.</p>
Hint: Type the inline container element name used to wrap a word
2. <p>Price: <span class="bold">$9.99</span>.</p>
Hint: Type the attribute name used to assign a CSS class to this span
3. <p>The <span class="red">error</span> here.</p>
Hint: Type the element name for the closing inline container tag
4. <p><span class="a">One</span> <span class="b">Two</span></p>
Hint: Type the inline element name that wraps the second word
5. <p>User: <span id="username">Alice</span>.</p>
Hint: Type the attribute name used to give this span a unique identifier

Spot the Error

Question 1
A <SPAN class="highlight">word</span>
B <p>More text.</p>
C <p>Last line.</p>
Line A — HTML tag names must be lowercase. <SPAN> should be written as <span>.
Question 2
A <p>Price:
B <span class="price">$9.99<span>
C </p>
Line B — The span closing tag is missing its forward slash. It should be </span> not <span> at the end.
Question 3
A <p>Hello,
B <span class="name">Alice</span>
C <span class= "bold">!</span>
D </p>
Line C — There must be no space between = and the opening quote. The correct form is class="bold".
Question 4
A <p>Status:
B <span class="ok">Active</span>
C <span class="count">5</span>
D </span class="ok">
E </p>
Line D — Closing tags must not contain attributes. The correct closing tag is simply </span>.
Question 5
A <p>Total cost:
B <span class="currency">AUD</span>
C <span class="amount">42.50</span>
D <span class="note">inc. GST</span>
E <span>extra<\span>
Line E — The closing tag uses a backslash instead of a forward slash. It should be </span> not <\span>.

Student with a class code? Join your class →