Definition
The <em> tag is used to add semantic emphasis to words or text compared to the surrounding text.
Example
<p>You should <em>not</em> drive on the wrong side of the road.</p>You should not drive on the wrong side of the road.
Usage
- You must use an opening and closing tag.
- Content displayed in an
<em>tag is shown as italic. This can be further styled using CSS. - The following use cases show how using the
<em>tag can change the meaning of the sentence, and as such becomes integral to the content:- General statement:
<p>Cats are cute animals.</p> - Statement stressing that cats are cute, in contrast to say, dogs:
<p><em>Cats</em> are cute animals.</p> - Statement arguing that cats are cute, in contrast to someone arguing that they are not cute:
<p>Cats <em>are</em> cute animals.</p> - In this statement you might be arguing that cats are cute animals, not mean animals.
<p>Cats are <em>cute<em> animals.</p> - If someone asserted that cats were human, you might want to stress that they are in fact, animals:
<p>Cats are cute <em>animals</em>.</p>
- General statement:
Attributes
The <em> element only supports the Global Attributes.
Best Practices
- You should not use the
<em>element for generic italic styling. If you wish to make text or even a paragraph stand out from the rest of the content (for example, a lead paragraph), then the<i>element should be used. - The
<em>element is used to stress certain words which may change the meaning or meaning of the sentence, not denote importance. To stress importance, use the<strong>tags. - You can read how Google uses
<em>elements for ranking purposes here
Specification
Browser Support
Desktop
| Chrome | Edge | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
| Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
