The difference between <em> and <i>

The <em> and <i> elements might seem similar, but they’re intended for very different purposes indeed. It’s important that you use the right one for the right context. We call this semantic markup.

The similarity is that browsers usually render both elements in italics. This behaviour is not in the specification, though. It’s just something browser makers choose to implement.

If you want to italicize some text for presentation only—not for any semantic meaning—you should skip both of these elements in favour of the font-style CSS property.

If there’s an actual semantic reason for the italics, read on to learn which element you should use.

Use <em> for emphasis

You should use <em> went you want to emphasize something. It’s for those situations when you want to stress something to affect the meaning of the sentence. It’s really important that you understand this. See what I mean?

Some examples from the MDN Web Docs:

<p>Get out of bed <em>now</em>!</p>

<p>We <em>had</em> to do something about it.</p>

<p>This is <em>not</em> a drill!</p>

Use <i> for offset text

The <i> element is for words that are offset from the rest of the text for some reason. Some examples given on the MDN Web Docs are technical terms, foreign language phrases, or fictional character thoughts.

Some further examples, again borrowed from the MDN Web Docs:

<p>I looked at it and thought <i>This can't be real!</i></p>

<p><i>Musa</i> is one of two or three genera in the family <i>Musaceae</i>; it includes bananas and plantains.</p>

<p>The term <i>bandwidth</i> describes the measure of how much information can pass through a data connection in a given amount of time.</p>