← Back to All Tags

<em>

Applies stress emphasis styling

Definition and Usage

The <em> tag is used to emphasize text.

The <em> tag is a semantic element that indicates stress emphasis. By default, browsers render emphasized text in italic, but the importance is in the meaning, not the styling.

Screen readers will pronounce the words in <em> with verbal stress emphasis, making it important for accessibility.

Tip: Use <em> for semantic emphasis (meaning), and <i> for text that should be stylistically different without added emphasis.
Note: While both <em> and <i> typically display text in italics, they have different semantic meanings. Always choose based on meaning, not appearance.

Browser Support

The <em> tag is supported in all browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <em> tag supports the Global Attributes in HTML.

The <em> tag also supports the Event Attributes in HTML.

Examples

Basic Emphasis

Add emphasis to important words in a sentence:

Example

<p>You <em>must</em> complete the assignment by Friday.</p>

<p>I <em>really</em> want to go to the concert tonight.</p>

<p>This is <em>not</em> what I expected.</p>
Output:

You must complete the assignment by Friday.

I really want to go to the concert tonight.

This is not what I expected.

Multiple Emphasis Levels

Nest emphasis tags for stronger emphasis:

Example

<p>This is <em>important</em>, but this is <em><em>very</em> important</em>.</p>

<p>I like cats, but I <em>really</em> like dogs, and I <em><em>absolutely love</em> puppies</em>!</p>
Output:

This is important, but this is very important.

I like cats, but I really like dogs, and I absolutely love puppies!

Stress Emphasis in Context

Show how emphasis changes meaning:

Example

<p><em>I</em> didn't say you stole my money.</p>
<p>I <em>didn't</em> say you stole my money.</p>
<p>I didn't <em>say</em> you stole my money.</p>
<p>I didn't say <em>you</em> stole my money.</p>
<p>I didn't say you <em>stole</em> my money.</p>
<p>I didn't say you stole <em>my</em> money.</p>
Output (each has a different meaning):

I didn't say you stole my money. (Someone else said it)

I didn't say you stole my money. (I never said that)

I didn't say you stole my money. (I implied it)

I didn't say you stole my money. (Someone else stole it)

I didn't say you stole my money. (You acquired it another way)

I didn't say you stole my money. (You stole someone else's)

Emphasis with CSS Styling

Apply custom styles while maintaining semantic meaning:

Example

<style>
  em {
    font-style: normal;
    color: #745af2;
    font-weight: 600;
  }

  em.highlight {
    background: #fffacd;
    padding: 2px 4px;
    border-radius: 3px;
  }
</style>

<p>This is <em>emphasized</em> with custom styling.</p>
<p>This is <em class="highlight">highlighted</em> emphasis.</p>

Emphasis in Sentences

Real-world usage examples:

Example

<p>The meeting is scheduled for <em>tomorrow</em>, not today.</p>

<p>Please <em>do not</em> park in the reserved spaces.</p>

<p>This offer is available for a <em>limited time only</em>.</p>

<p>We <em>strongly recommend</em> updating your password regularly.</p>

<em> vs <i> Tag

Understanding the difference between semantic and stylistic italics:

Feature <em> (Emphasis) <i> (Italic)
Purpose Semantic emphasis Stylistic offset
Meaning Indicates stress emphasis Indicates alternate voice or mood
Screen Readers Announces with vocal emphasis No special announcement
Default Style Italic Italic
Use Cases Important words, stress, urgency Technical terms, foreign words, thoughts
SEO Impact May signal importance to search engines Minimal SEO impact
When to use <em>:
  • To add stress emphasis to words or phrases
  • To indicate importance or urgency
  • When the emphasis changes the meaning of the sentence
  • For words that should be vocally stressed when read aloud
When to use <i>:
  • Technical terms: <i>Homo sapiens</i>
  • Foreign words: <i>bon appétit</i>
  • Ship names: <i>HMS Titanic</i>
  • Thoughts: <i>I wonder what time it is</i>

<em> vs <strong>

Both indicate importance, but in different ways:

Feature <em> <strong>
Emphasis Type Stress emphasis Strong importance
Default Style Italic Bold
Level Subtle emphasis Strong importance
Use Case Change of tone, stress Warnings, important information

Example Comparison

<!-- Using em for stress -->
<p>Please <em>do</em> remember to bring your ID.</p>

<!-- Using strong for importance -->
<p><strong>Warning:</strong> This action cannot be undone.</p>

<!-- Combining both -->
<p><strong>Important:</strong> You <em>must</em> submit by the deadline.</p>

Accessibility

How screen readers handle emphasized text:

  • Screen readers pronounce <em> content with vocal stress emphasis
  • This helps visually impaired users understand the intended meaning and tone
  • Proper use of <em> improves content accessibility
  • Avoid overusing emphasis - it loses impact if everything is emphasized
  • Don't rely solely on visual styling - semantic HTML is crucial
  • Screen readers handle nested <em> tags with increased emphasis
Accessibility Best Practice: Always choose <em> based on semantic meaning, not visual appearance. If you only need italic styling without emphasis, use CSS or the <i> tag for non-semantic italics.

When to Use <em> vs <i>

A practical guide for choosing the right tag:

Use <em> for:

  • Words that should be stressed when spoken aloud
  • Emphasis that changes the meaning of a sentence
  • Important points you want to highlight
  • Urgent or critical information within text
  • Words that need vocal emphasis for clarity

Use <i> for:

  • Scientific or taxonomic names (e.g., Canis lupus)
  • Foreign phrases (e.g., carpe diem)
  • Ship or vehicle names (e.g., RMS Titanic)
  • Book, movie, or song titles (when not using <cite>)
  • Technical terms on first use
  • Inner thoughts or dialogue
  • Idiomatic phrases from other languages

Example Comparison

<!-- Correct use of em (stress emphasis) -->
<p>I said I wanted the <em>blue</em> one, not the red one.</p>

<!-- Correct use of i (foreign phrase) -->
<p>The phrase <i>et cetera</i> means "and other things."</p>

<!-- Correct use of i (ship name) -->
<p>The <i>Queen Mary</i> set sail in 1936.</p>

<!-- Correct use of em (importance/stress) -->
<p>This is <em>exactly</em> what I was looking for!</p>

Try it Yourself

Interactive Example

Here's a live example of emphasized text:

You must complete the registration before Friday.

This is not what I expected to see.

I really appreciate your help with this project.

The deadline is tomorrow, not next week.

Best Practices

  • Use <em> for semantic emphasis, not just styling
  • Don't overuse emphasis - it loses impact when everything is emphasized
  • Choose <em> over <i> when you need stress emphasis
  • Use <strong> for strong importance, <em> for stress
  • Nest <em> tags for stronger levels of emphasis when needed
  • Consider how screen readers will announce the content
  • You can style <em> with CSS while preserving semantic meaning
  • Test with screen readers to ensure proper emphasis conveyance

Default CSS Settings

Most browsers will display the <em> element with the following default values:

Default CSS

em {
  font-style: italic;
}

Related Tags

  • <strong>

    Defines important text

  • <i>

    Defines italic text (stylistic)

  • <mark>

    Defines marked/highlighted text

  • <b>

    Defines bold text (stylistic)