Span: the inline container

Tip: Choose Save as PDF in the print dialog to download. Use A4 paper size.

Span: the inline container

Name:
Date:
Class:
A

Quick Questions

Shade in the A or B circle for each question.

1. Is <span> a block-level or inline element?
A Block-level
B Inline
2. True or false: <span> adds visible styling like colour by default.
A False
B True
3. Where must a <span> be placed?
A Inside a block element like <p> or <h1>
B Outside all block elements
4. True or false: <SPAN> with capital letters is valid HTML.
A False
B True
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
B

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

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

Definitions

<span>
D

Fill in the Blanks

Complete each line of code by filling in the missing parts.

1.
<p>Hello, <___ class="name">Alice</span>.</p>
2.
<p>Price: <span ___="bold">$9.99</span>.</p>
3.
<p>The <span class="red">error</___> here.</p>
4.
<p><span class="a">One</span> <___ class="b">Two</span></p>
5.
<p>User: <span ___="username">Alice</span>.</p>
E

Spot the Error

Shade in the letter of the line that contains an error.

Question 1
A <SPAN class="highlight">word</span>
B <p>More text.</p>
C <p>Last line.</p>
Question 2
A <p>Price:
B <span class="price">$9.99<span>
C </p>
Question 3
A <p>Hello,
B <span class="name">Alice</span>
C <span class= "bold">!</span>
D </p>
Question 4
A <p>Status:
B <span class="ok">Active</span>
C <span class="count">5</span>
D </span class="ok">
E </p>
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>

Answer Key

Span: the inline container
Section A: Quick Questions
Q1
B — Inline
Q2
A — False
Q3
A — Inside a block element like <p> or <h1>
Q4
A — False
Q5
B — <span> is inline; <div> is block-level
Section B: Match the Pairs
Q1
<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
Q2
<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
Q3
<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>
Q4
<span> has no built-in styling - all appearance comes from CSS targeting its class or id → <p><span id="badge">New</span> product.</p>
Q5
<SPAN class="tag">Sale</SPAN> → Tag names must be lowercase - <SPAN> and </SPAN> should be <span> and </span>
Q6
<p>Label: <span class="val">10<span></p> → The closing tag is missing its forward slash - it should be </span> not <span>
Section C: Definitions
Q1
<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.
Section D: Fill in the Blanks
Q1
<p>Hello, <span class="name">Alice</span>.</p>
Q2
<p>Price: <span class="bold">$9.99</span>.</p>
Q3
<p>The <span class="red">error</span> here.</p>
Q4
<p><span class="a">One</span> <span class="b">Two</span></p>
Q5
<p>User: <span id="username">Alice</span>.</p>
Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <SPAN> should be written as <span>.
Q2
B — The span closing tag is missing its forward slash. It should be </span> not <span> at the end.
Q3
C — There must be no space between = and the opening quote. The correct form is class="bold".
Q4
D — Closing tags must not contain attributes. The correct closing tag is simply </span>.
Q5
E — The closing tag uses a backslash instead of a forward slash. It should be </span> not <\span>.