The <em> element marks words with a stressed emphasis compared to the surrounding text. The <em> element makes the text inside it look italic — visually identical to any text inside the <i> element. So what's the difference?

The difference is in the semantics — it's not about how the text looks, but what it means. See? We use the <em> element to mark the words that we would put more emphasis on while speaking to slightly change the meaning of the sentence. The <i> element's use is for text that differs from "normal" — terms, titles, foreign words, etc.