The HTML <em> element emphasizes its contents. The greater the number of ancestor <em> elements the larger the stressor of emphasis. Using <em> elements can change the way content is perceived.
Example
Syntax
1 | <p>Turtles don’t make the greatest pets.</p> |
2 | |
3 | <p>Turtles <em>don’t</em> make the greatest pets.</p> |
4 | |
5 | <p>Turtles don’t make the <em>greatest</em> pets.</p> |
6 | |
7 | <p>Turtles <em>don’t make the <em>greatest</em> pets</em>.</p> |
Result
Browser Support
The <em> tag is supported in all modern browsers. Read more on caniuse.com.
Attributes
The <em> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).
Content
An <em> tag accepts phrasing content.
What’s the difference between <i> and <em>?
Visually speaking both the i (“italic”) and em tags produce the same result. The difference is in the semantics. Here are a couple of examples to help illustrate:
<em>: “We had to make a decision right then and there”. When reading the text the pronunciation the words with an emphasis, using verbal stress.<i>: “The Niña, the Pinta, and the Santa Maria sailed into the sea.” Here, there is no added emphasis or importance on the three ships mentioned in the passage. It is merely indicated that the object in question is not a human named Niña, Pinta, or Santa Maria but ships named Niña, Pinta, and Santa Maria.
Learn More
The HTML
<em> element shouldn’t be confused with the em unit of measurement in CSS!
