<em> is used to define emphasized text, and is typically rendered visually italicized by the browser and pronounced with emphasis by a screen reader, while
<i> is used to define text that differs from normal prose of the text for any reason and it has to be read or said in a different tone or mood.
Emphasized text is that word or group of words that has an emphasis on the surrounding text and affects the meaning of the entire sentence. Thus, it is not the same to say "Get out of bed now" as "Get out of bed now."
Valid uses of
<i> could be a text in another language, a technical or scientific term, a taxonomic designation, a thought, the name of a ship... or when the text refers to the definition of a word and not its meaning semantic (Ex: The word he is an article).
Neither is to be used exclusively for styling. In case you want to use italics it is better to use the CSS
<i> should be a last resort and only used when there is no other more appropriate tag available, such as
- Type: inline / inline
- Self-closing: No / No
- Semantic value: No / No