← 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

What it does: 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, renders exactly like the surrounding text. has no built-in visual styling. All appearance must be added with CSS targeting its class or id. is an inline element - it must live inside a block container like , <h1>, or <li>. HTML tag names must be lowercase. is non-standard - use . 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. should be written as . The span closing tag is missing its forward slash. It should be not at the end.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Span: the inline container (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

Is a block-level or inline element?

InlineBlock-level

Matches

Sale

↓

Tag names must be lowercase - and should be and

Applying

Meanings

Term

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

The price is

Testing

Gaps

Hello, < class="name">Alice.

Check Answer

Spots

1word

2More text.

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

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.

Teach this with your class →

Quick Questions

1. Is a block-level or inline element?

A. Inline ✓

B. Block-level

stays within the text flow and does not start a new line. Use <div> for block-level grouping.

2. True or false: adds visible styling like colour by default.

A. False ✓

B. True

has no built-in visual styling. All appearance must be added with CSS targeting its class or id.

3. Where must a be placed?

A. Inside a block element like or <h1> ✓

B. Outside all block elements

is an inline element - it must live inside a block container like , <h1>, or <li>.

4. True or false: with capital letters is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. is non-standard - use .

5. What is the key difference between and <div>?

A. is inline; <div> is block-level ✓

B. is block-level; <div> is inline

wraps inline content without breaking the flow. <div> creates a block that starts on a new line.

Match the Pairs

Hello, Alice! → Wraps 'Alice' inline - keeps it in the text flow and CSS targets .name to style it

Error: file not found. → Styles only 'Error:' inline - the rest of the paragraph is unaffected by the .red CSS rule

is an inline container - it stays in the text flow without starting a new line → Total: $42 AUD.

has no built-in styling - all appearance comes from CSS targeting its class or id → New product.

Sale → Tag names must be lowercase - and should be and

Label: 10 → The closing tag is missing its forward slash - it should be not

Key Term

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. Hello, Alice.

Hint: Type the inline container element name used to wrap a word

2. Price: $9.99.

Hint: Type the attribute name used to assign a CSS class to this span

3. The error here.

Hint: Type the element name for the closing inline container tag

4. One Two

Hint: Type the inline element name that wraps the second word

5. User: Alice.

Hint: Type the attribute name used to give this span a unique identifier

Spot the Error

Question 1

A word

B More text.

C Last line.

Line A — HTML tag names must be lowercase. should be written as .

Question 2

A Price:

B $9.99

C

Line B — The span closing tag is missing its forward slash. It should be not at the end.

Question 3

A Hello,

B Alice

C !

D

Line C — There must be no space between = and the opening quote. The correct form is class="bold".

Question 4

A Status:

B Active

C 5

D

E

Line D — Closing tags must not contain attributes. The correct closing tag is simply .

Question 5

A Total cost:

B AUD

C 42.50

D inc. GST

E extra<\span>

Line E — The closing tag uses a backslash instead of a forward slash. It should be not <\span>.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?