Applies stress emphasis styling

Definition and Usage

The  tag is used to emphasize text.

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

The  element conveys stress emphasis. Spoken emphasis varies by screen reader and configuration, so do not rely on a guaranteed voice change to communicate essential information.

Tip: Use  for semantic emphasis (meaning), and  for text that should be stylistically different without added emphasis.

Note: While both  and  typically display text in italics, they have different semantic meanings. Always choose based on meaning, not appearance.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The  tag supports the Global Attributes in HTML.

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

vs 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 :

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 :

Technical terms: Homo sapiens
Foreign words: bon appétit
Ship names: HMS Titanic
Thoughts: I wonder what time it is

vs

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  content with vocal stress emphasis
This helps visually impaired users understand the intended meaning and tone
Proper use of  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  tags with increased emphasis

Accessibility Best Practice: Always choose  based on semantic meaning, not visual appearance. If you only need italic styling without emphasis, use CSS or the  tag for non-semantic italics.

When to Use vs

A practical guide for choosing the right tag:

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

Try in Code Playground

Best Practices

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

Default CSS Settings

Most browsers will display the  element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

em {
  font-style: italic;
}

Related Tags

Defines important text
Defines italic text (stylistic)
Defines marked/highlighted text
Defines bold text (stylistic)

Analytics choices

<em>

Definition and Usage

Browser support and standards

Attributes

Examples

Basic Emphasis

Example

Multiple Emphasis Levels

Example

Stress Emphasis in Context

Example

Emphasis with CSS Styling

Example

Emphasis in Sentences

Example

<em> vs <i> Tag

<em> vs <strong>

Example Comparison

Accessibility

When to Use <em> vs <i>

Use <em> for:

Use <i> for:

Example Comparison

Try it Yourself

Interactive Example

Best Practices

Default CSS Settings

Default CSS

Related Tags