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, 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.
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>- Get out of bed now!
- We had to do something about it.
- This is not a drill!
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>- I looked at it and thought This can't be real!
- Musa is one of two or three genera in the family Musaceae; it includes bananas and plantains.
- The term bandwidth describes the measure of how much information can pass through a data connection in a given amount of time.