The <em> tag is used to emphasize a word or expression. It tells the browser (and assistive technologies) that a passage should be pronounced with emphasis or holds particular importance in the sentence.
By default, emphasis is displayed in italics, but its role is primarily semantic.
Structure and syntax of the <em> tag
Basic structure and syntax
The <em> tag is a container tag (which works in pairs):
- with an opening tag
<em>; - as well as a closing tag
</em>.
Example:
<em>[Text to emphasize]</em>
Usage example
In a sentence:
<p>It is <em>absolutely necessary</em> to back up your data.</p>The segment "absolutely necessary" will be read with emphasis by a screen reader and displayed in italics.
Try it yourself:
Attributes
<em> accepts the standard attributes: class, id, style, title, lang, etc.
Difference with other similar tags
<i>: puts word(s) in italic form for a change of register (foreign term, work title), without semantic emphasis.<strong>: emphasizes importance or urgency; often rendered in bold and taken into account by screen readers and search engines.<b>: purely stylistic bold, without additional meaning.
Best practices
Use <em> to signify intonation, emphasis or logical contrast (Like "I really want to go!").
Limit usage to very short pieces in a sentence (too much emphasis dilutes the message).
Optionally combine with CSS rules (font-style, color) without removing the semantic value.
For a crucial passage (alert, warning) prefer <strong>; for the italic effect, use <i> instead.
Browser compatibility
The <em> tag is supported by all modern browsers:
| Browser | Compatibility |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Yes |