← HTML & CSS

Inline text formatting (strong, em, b, i)

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.

Part of: HTML and CSS Journey — Module 12

What it does: <b> makes 'quick' bold visually. Unlike <strong>, it does not suggest the word is important. <i> is used here for a technical term. It is italic but carries no semantic stress - that is what <em> would be for. Inline elements sit within the surrounding text flow. They do not start a new line - that is the behaviour of block-level elements like <p>. All four are regular elements with both opening and closing tags. None of them are self-closing. <strong> signals importance. The text is rendered bold and carries semantic weight for accessibility tools. <em> adds semantic emphasis. It renders italic and is meaningful to screen readers and search engines.

Common mistakes: HTML tag names must be lowercase. <Strong> and </Strong> with a capital S are non-standard. The correct form is <strong> and </strong>. The em element is closed with <em> instead of </em>. A closing tag must have a forward slash: </em>.

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 Inline text formatting (strong, em, b, i) (PDF)

Take this worksheet further — free with Cloodit

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

Learning
Duo
Which element marks text as semantically important and renders it bold?
<strong><b>
Matches
<p><bold>Important!</bold></p>
↓
<bold> is not a valid HTML element - use <b> for visual bold or <strong> for important text
Applying
Meanings
Term
<strong>
Meaning
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.
Practice
<p>This is <strong>very important</strong> text.</p>
Testing
Gaps
<p>This is <>important</strong> text.</p>
Check Answer
Spots
1<Strong>Warning</Strong>
2<p>Normal text here.</p>

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

The 'Blue-Ringed Octopus' badge — Reef Legend, 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.

Teach this with your class →

Quick Questions

1. Which element marks text as semantically important and renders it bold?
A. <strong> ✓
B. <b>
<strong> carries semantic meaning - the text is important. <b> is purely visual bold with no implied meaning.
2. Which element marks text for emphasis and renders it italic?
A. <em> ✓
B. <i>
<em> carries semantic emphasis. <i> is purely visual italic with no implied meaning.
3. True or false: <strong> and <b> produce identical visual results in most browsers.
A. True ✓
B. False
Both render as bold text visually. The difference is semantic: <strong> signals importance to screen readers and search engines, <b> does not.
4. True or false: inline elements like <strong> and <em> start on a new line.
A. False ✓
B. True
Inline elements sit within the surrounding text flow. They do not start a new line - that is the behaviour of block-level elements like <p>.
5. Which element should you use to italicise a technical term with no special emphasis?
A. <i> ✓
B. <em>
<i> is the right choice for visual italics without semantic stress, such as technical terms, titles, or foreign words.

Match the Pairs

<strong>Warning!</strong> → Marks 'Warning!' as semantically important - browsers display it bold and screen readers may stress it
<em>Please read this</em> → Marks the phrase for emphasis - browsers display it italic and screen readers may stress it
<b> makes text visually bold - no semantic importance implied → <p>The <b>quick</b> brown fox.</p>
<i> makes text visually italic - no emphasis implied → <p>The term <i>in situ</i> means in place.</p>
<p><bold>Important!</bold></p> → <bold> is not a valid HTML element - use <b> for visual bold or <strong> for important text
<p><b>Bold<em>and italic</b></em></p> → Closing tags must be in reverse order of opening - </em> must come before </b>

Key Term

<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.

Fill in the Blanks

1. <p>This is <strong>important</strong> text.</p>
Hint: Type the element name that marks text as semantically important
2. <p>Please <em>read this carefully</em>.</p>
Hint: Type the element name that marks text for emphasis
3. <p>Warning: <strong>do not delete</strong>.</p>
Hint: Type the closing tag name that ends the strong element
4. <p>The <b>quick brown fox</b> jumped.</p>
Hint: Type the element name that makes text visually bold without implying importance
5. <p>The term <i>in situ</i> means in place.</p>
Hint: Type the element name that makes text visually italic without semantic emphasis

Spot the Error

Question 1
A <Strong>Warning</Strong>
B <p>Normal text here.</p>
C <p>More content.</p>
Line A — HTML tag names must be lowercase. <Strong> and </Strong> with a capital S are non-standard. The correct form is <strong> and </strong>.
Question 2
A <p>Read this:
B <em>very carefully<em>
C before continuing.</p>
Line B — The em element is closed with <em> instead of </em>. A closing tag must have a forward slash: </em>.
Question 3
A <p>This is
B normal text
C and this is <b>bold text.</p>
Line C — The <b> element is opened but never closed. Every opening <b> tag must be matched with a closing </b> tag.
Question 4
A <p>Here is
B some text with
C an <i>italic phrase</i>
D and more <italic>words</italic>.
Line D — <italic> is not a valid HTML element. The correct element for visual italic styling is <i>, not <italic>.
Question 5
A <p>A
B <strong>critical</strong>
C <em>note</em>
D follows:
E <b><strong>double bold</b></strong>
Line 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>.
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?