<em> Emphasis
Stress emphasis that changes what a sentence means. Italic by default.
<em> marks the word you would stress if you said the sentence out loud. Move the stress and the meaning moves with it: I did not say that, compared with I did not say that.
Browsers show it in italics. Italic text without stress, like a foreign word, a ship name or a thought, takes <i>. Book and film titles take <cite>.
The em element definition (opens in a new tab) shows how shifting the emphasis changes a sentence. Practise it in the Strong and Emphasis lesson.
Syntax
<em>stressed word</em>When to use it
An <em> goes where a speaker's voice would lean on a word: correcting a detail ("the meeting is on Tuesday"), showing how a line of dialogue is spoken in a story, or marking a sarcastic "great" in a review. Nesting em inside em adds more stress, though in real writing one level is almost always enough.
Look at the reason for the italics before choosing. Stress is em. Importance is strong. A foreign phrase, a thought or a technical term is i. A book or film title is cite. A term being defined right here is dfn.
Stress belongs on a word or short phrase, so wrapping a whole paragraph in em defeats the purpose. Less obvious is em inside text that is already italic, such as an italic quotation or caption. There the emphasis becomes invisible. Restyle em in those places, for example with font-style:normal, so the stressed word still stands out.
Live example
Edit the code and watch the preview.
<p>I <em>love</em> pancakes.</p>
<p>I love <em>pancakes</em>, not waffles.</p>More examples
Correcting a detail
A short notice uses em on the one word that changed. Reading it aloud, you would stress that word, which is exactly what em records. Move the em to another word and the notice suggests a different correction.
<p>Reminder: the pancake breakfast is on <em>Sunday</em> this week, not Saturday.</p>
<p>Tickets are still <em>free</em> for children under six.</p>Emphasis inside italic text
Inside text that is already italic, the default em style shows no difference. Setting font-style:normal on the em lets the stressed word stand out by switching back to upright type.
<p style="font-style:italic">The sign by the pond said: please do <em style="font-style:normal">not</em> feed the ducks bread.</p>Tip: Put em where your voice would stress the word.
Browser support
Every browser supports em, which dates back to HTML 2.0, and the default stylesheet renders it as italic. Screen readers generally do not change their voice for it. Treat it as meaning recorded in the markup, with no promise of a spoken difference.
Accessibility
Screen readers rarely change their voice for em. If users must notice something, emphasis alone will not carry it. Meaning that depends on formatting is covered in the W3C note Understanding Info and Relationships (opens in a new tab).
Common mistakes
Wrong
<em>The Great Gatsby</em> is a novel.Right
<cite>The Great Gatsby</cite> is a novel.em is stress emphasis. Titles of works use cite.
Frequently asked questions
What is the difference between em and i in HTML?
They mean different things, even though both are italic by default. <em> is stress emphasis, the word you would say differently when reading aloud, and it can change what the sentence means. <i> marks text in an alternate voice or mood: a foreign phrase, a technical term, a ship name, a thought. The print traditions behind both appear in Wikipedia's article on emphasis in typography (opens in a new tab).
Can I nest em tags?
Yes. Every level of nesting adds stress, so <em> inside <em> means even stronger emphasis. You will rarely see it. Since the meaning of a sentence depends on which words carry the stress, wrap exactly the stressed word or words and nothing more.
Practise it
- Strong and Emphasis (Module 2: Text)