For strong importance or urgency. Learn more →
<em> - The Emphasis Element
The <em> Element
Section titled “The <em> Element”The emphasis element marks text that has stress emphasis, changing the meaning of the sentence. It’s typically rendered in italic but represents semantic emphasis, not just visual styling.
Quick Example
Section titled “Quick Example” Result
Syntax
Section titled “Syntax”<em>emphasized text</em>The <em> element adds stress emphasis that alters the meaning or tone of the sentence.
<em> vs <i>
Section titled “<em> vs <i>”This is a crucial distinction in semantic HTML:
<!-- Semantic emphasis that changes meaning --><p>I <em>love</em> this movie!</p><p>Cats are <em>not</em> dogs.</p>Use <em> when the emphasis changes the sentence meaning.
<!-- Visual styling, no semantic emphasis --><p>The ship <i>HMS Victory</i> is in Portsmouth.</p><p>She thought, <i>This is wonderful</i>.</p>Use <i> for technical terms, foreign words, or thoughts.
Common Use Cases
Section titled “Common Use Cases”Stress Emphasis
Section titled “Stress Emphasis” Result
Changing Sentence Meaning
Section titled “Changing Sentence Meaning”The placement of <em> changes the meaning:
Result
Contrast and Comparison
Section titled “Contrast and Comparison” Result
Important Qualifiers
Section titled “Important Qualifiers” Result
Instructions and Warnings
Section titled “Instructions and Warnings” Result
Nesting for Stronger Emphasis
Section titled “Nesting for Stronger Emphasis”Nest <em> elements for increased emphasis:
Result
With Other Elements
Section titled “With Other Elements”In Headings
Section titled “In Headings” Result
In Lists
Section titled “In Lists” Result
In Quotations
Section titled “In Quotations” Result
Styling
Section titled “Styling”Customize the emphasis appearance:
Result
When NOT to Use <em>
Section titled “When NOT to Use <em>”Don’t Use for Titles
Section titled “Don’t Use for Titles”<p>I'm reading <em>The Great Gatsby</em>.</p><p>I'm reading <cite>The Great Gatsby</cite>.</p>Don’t Use for Visual Styling Only
Section titled “Don’t Use for Visual Styling Only”<!-- No semantic emphasis --><p><em>Chapter 1</em></p><p><i>Chapter 1</i></p><!-- or --><p><span class="chapter">Chapter 1</span></p>Don’t Use for Strong Importance
Section titled “Don’t Use for Strong Importance”<p><em>Warning:</em> This action cannot be undone.</p><p><strong>Warning:</strong> This action cannot be undone.</p>Semantic Emphasis Elements
Section titled “Semantic Emphasis Elements”<!-- Stress emphasis --><p>I <em>really</em> mean it!</p><!-- Strong importance --><p><strong>Warning:</strong> Dangerous!</p><!-- Highlighted/marked --><p>Search results for <mark>HTML</mark></p><!-- Stylistic offset --><p>The term <i>semantic</i> refers to meaning.</p>Accessibility
Section titled “Accessibility”Screen Reader Behavior
Section titled “Screen Reader Behavior”Many screen readers announce emphasized text with different intonation or inflection, helping convey the stress emphasis to users.
Use Appropriately
Section titled “Use Appropriately”Don’t overuse emphasis - it loses impact:
<p>This is <em>very</em> <em>important</em> and you <em>must</em> <em>really</em> pay attention.</p><p>This is <em>very important</em> and you must really pay attention.</p>Combine with Context
Section titled “Combine with Context”Ensure meaning is clear even without emphasis:
<!-- Good: clear even without emphasis --><p>You must save your work <em>before</em> closing the application.</p>
<!-- Avoid: confusing without emphasis --><p>Do this <em>now</em>.</p>Browser Support
Section titled “Browser Support”| Browser | Version | Notes |
|---|---|---|
| Chrome | 1+ | Full support |
| Firefox | 1+ | Full support |
| Safari | 1+ | Full support |
| Edge | 12+ | Full support |
| IE | 3+ | Full support |
The <em> element has been supported since the earliest browsers.