Inline text formatting (strong, em, b, i)
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which element marks text as semantically important and renders it bold?
2. Which element marks text for emphasis and renders it italic?
3. True or false: <strong> and <b> produce identical visual results in most browsers.
4. True or false: inline elements like <strong> and <em> start on a new line.
5. Which element should you use to italicise a technical term with no special emphasis?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<strong>Warning!</strong> | AClosing tags must be in reverse order of opening - </em> must come before </b> | |
| 2<em>Please read this</em> | B<bold> is not a valid HTML element - use <b> for visual bold or <strong> for important text | |
| 3<b> makes text visually bold - no semantic importance implied | C<p>The term <i>in situ</i> means in place.</p> | |
| 4<i> makes text visually italic - no emphasis implied | D<p>The <b>quick</b> brown fox.</p> | |
| 5<p><bold>Important!</bold></p> | EMarks 'Warning!' as semantically important - browsers display it bold and screen readers may stress it | |
| 6<p><b>Bold<em>and italic</b></em></p> | FMarks the phrase for emphasis - browsers display it italic and screen readers may stress it |
C
Definitions
<strong>
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<p>This is <___>important</strong> text.</p>
2.
<p>Please <___>read this carefully</em>.</p>
3.
<p>Warning: <strong>do not delete</___>.</p>
4.
<p>The <___>quick brown fox</b> jumped.</p>
5.
<p>The term <___>in situ</i> means in place.</p>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<Strong>Warning</Strong>
B
<p>Normal text here.</p>
C
<p>More content.</p>
Question 2
A
<p>Read this:
B
<em>very carefully<em>
C
before continuing.</p>
Question 3
A
<p>This is
B
normal text
C
and this is <b>bold text.</p>
Question 4
A
<p>Here is
B
some text with
C
an <i>italic phrase</i>
D
and more <italic>words</italic>.
Question 5
A
<p>A
B
<strong>critical</strong>
C
<em>note</em>
D
follows:
E
<b><strong>double bold</b></strong>
Answer Key
Inline text formatting (strong, em, b, i)
Section A: Quick Questions
Q1
A — <strong>
Q2
B — <em>
Q3
B — True
Q4
A — False
Q5
A — <i>
Section B: Match the Pairs
Q1
<strong>Warning!</strong> → Marks 'Warning!' as semantically important - browsers display it bold and screen readers may stress it
Q2
<em>Please read this</em> → Marks the phrase for emphasis - browsers display it italic and screen readers may stress it
Q3
<b> makes text visually bold - no semantic importance implied → <p>The <b>quick</b> brown fox.</p>
Q4
<i> makes text visually italic - no emphasis implied → <p>The term <i>in situ</i> means in place.</p>
Q5
<p><bold>Important!</bold></p> → <bold> is not a valid HTML element - use <b> for visual bold or <strong> for important text
Q6
<p><b>Bold<em>and italic</b></em></p> → Closing tags must be in reverse order of opening - </em> must come before </b>
Section C: Definitions
Q1
<strong> — An inline HTML element that marks text as important. Browsers display it bold. Use it when the content has semantic importance, not just for visual styling.Section D: Fill in the Blanks
Q1
<p>This is <strong>important</strong> text.</p>Q2
<p>Please <em>read this carefully</em>.</p>Q3
<p>Warning: <strong>do not delete</strong>.</p>Q4
<p>The <b>quick brown fox</b> jumped.</p>Q5
<p>The term <i>in situ</i> means in place.</p>Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <Strong> and </Strong> with a capital S are non-standard. The correct form is <strong> and </strong>.
Q2
B — The em element is closed with <em> instead of </em>. A closing tag must have a forward slash: </em>.
Q3
C — The <b> element is opened but never closed. Every opening <b> tag must be matched with a closing </b> tag.
Q4
D — <italic> is not a valid HTML element. The correct element for visual italic styling is <i>, not <italic>.
Q5
E — The closing tags are in the wrong order. <b> and <strong> must be closed in the reverse order they were opened: </strong> first, then </b>.