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
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.
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.
Emphasizing "animals"
Likewise, if someone mistakenly referred to dogs as plants, one might emphasize "animals" to correct that statement.
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.
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.
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
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
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 |