Definition and Usage
The <em> tag is used to emphasize (stress emphasis) content that is contextually more important than the surrounding text.
This tag highlights particularly significant words or phrases in context, drawing the reader's attention to their importance within the surrounding content.
- The
<em>tag is primarily used to express either explicit or implicit contrast within a sentence, helping to highlight words that carry special meaning in context. - The level and meaning of emphasis applied by the
<em>tag can change depending on where it appears in the sentence.
Usage Examples
The following examples demonstrate how the <em> tag can express either explicit or implicit contrast within a sentence, and how the overall tone or nuance of the sentence changes depending on where the emphasis is placed.
Without the <em> tag
<p>Dogs are intelligent animals.</p>
Dogs are intelligent animals.
Emphasizing "dogs"
By emphasizing the word "dogs," this statement implies that the type of animal being discussed is in question—perhaps someone else claimed that cats are the intelligent ones.
<p><em>Dogs</em> are intelligent animals.</p>
Dogs are intelligent animals.
Most browsers display text enclosed in the <em> tag in italic font style by default.
Emphasizing "intelligent"
By emphasizing the adjective "intelligent" this sentence reaffirms the specific characteristic of dogs—perhaps to refute someone who suggested that dogs are not very smart.
<p>Dogs are <em>intelligent</em> animals.</p>
Dogs are intelligent animals.
Emphasizing "animals"
Likewise, if someone mistakenly referred to dogs as plants, one might emphasize "animals" to correct that statement.
<p>Dogs are intelligent <em>animals</em>.</p>
Dogs are intelligent animals.
Emphasizing the entire sentence
Emphasizing the entire sentence makes it clear that the speaker is strongly asserting the main point. Such emphasis typically affects punctuation as well, which is why an exclamation mark (!) is used here.
<p><em>Dogs are intelligent animals!</em></p>
Dogs are intelligent animals!
Usage Notes
When You Only Want Italics
Most browsers render the <em> tag in italic font style by default.
However, the <em> tag should not be used solely for styling purposes. If your goal is simply to italicize text for visual presentation, use the CSS property font-style: italic; instead.
<p><span style="font-style: italic;">Dogs</span> are intelligent animals.</p>
Dogs are intelligent animals.
Difference Between <em> and <i> Tags
One of the most common sources of confusion among developers is that some HTML tags may look identical in browsers yet serve completely different semantic purposes.
The <em> and <i> tags are good examples.
Both render text in italic style by default, but they convey different meanings.
The table below summarizes the distinction between them:
| Comparison | <em> |
<i> |
|---|---|---|
| Meaning of emphasis | Contextual emphasis relative to the surrounding text | Used to distinguish text for a specific reason, such as a term or phrase |
| Primary purpose | To emphasize the meaning of the text | To differentiate the usage or function of the text |
Contextual Emphasis
<p>It will <em>rain today</em>.</p>
In this example, the emphasized phrase indicates the main point of the sentence—helping the user grasp the key information being conveyed.
Distinguishing Text from Its Context
<p>The friendly and bright <i>Persian</i> is a lovely companion cat.</p>
Here, the <i> tag is used to mark Persian as the breed of the cat, distinguishing it from the surrounding descriptive text.
Difference Between <em> and <strong> Tags
The <strong> tag represents strong importance, seriousness, or urgency for its contents.
This tag helps highlight significant portions of text such as titles, captions, or critical statements, making them stand out from the rest of the content.
Unlike the <em> tag, the <strong> tag's meaning does not change depending on where it appears in the sentence. It simply indicates that the content it encloses is *highly important*. In contrast, the <em> tag is typically used to express explicit or implicit contrast within a sentence, and the meaning can vary depending on the position of the tag.
Use the <strong> tag when the text is significantly more important than its surrounding content.
Technical Syntax Summary
Browser compatibility
| Tag |
Desktop Chrome
|
DesktopDesktop Edge
|
Desktop Firefox
|
Safari
|
|---|---|---|---|---|
<em>
|
1 | 12 | 1 | 4 |
Specifications
| Specification | |
|---|---|
<em>
|
HTML Standard #the-em-element |