Lesson 19 — Emphasis <em>

Learning Goals

• Understand the purpose of the <em> element.
• Learn how it differs from <i>.
• Use emphasis to make content clearer and more accessible.

Part 1 — What is <em>?

The <em> element emphasizes text. Browsers typically render it in italics, but unlike <i>, it conveys semantic importance.

Screen readers add vocal stress, so <em> improves accessibility.

Part 2 — Example

<p>You <em>must</em> complete this step before moving on.</p>
<p>The word <i>resume</i> is French for “summary.”</p>

Result: Both look italic, but <em> adds emphasis for accessibility.

Part 3 — Best Practices

• Use <em> when stressing a word or phrase matters.
• Use multiple levels: nested <em> increases emphasis strength.
• Don’t confuse <em> (emphasis) with <i> (stylistic italics).

Part 4 — Common Mistakes

• ❌ Using <i> when actual emphasis is intended.
• ❌ Overusing <em> — if everything is emphasized, nothing is.
• ❌ Nesting too many emphasis tags — confusing output.

Quick Quiz

1. What does <em> do?
2. How is <em> different from <i>?
3. What effect does <em> have on screen readers?

Mini Project — Instruction Manual

Write instructions for a recipe or a tutorial. Use <em> to highlight words like must, always, or never. Compare it with <i> used for foreign terms or labels.

Lesson 19 Dictionary

Terms introduced in this lesson.

E

<em> (Emphasis)

Marks text with emphasis. Italic by default, but adds semantic importance for accessibility.

I

<i> (Italics)

A stylistic element for alternate voice or terms, not semantic emphasis.