<i> just means "this is italic". You can change it, but that is still what it means. It is direct formatting, like clicking the "I" button in Word.
<em> means "this is emphasized". It's usually rendered by default in italics, and you can change it. It still means it's emphasized. You can make it look like the surrounding text. It still means it's emphasized, even if you can't see it. It is like applying a style in Word (with the italics property enabled by default).
Tex2002ans had a very good example of how they can be used differently:
Code:
<p>In <i>Book Title</i>, the character screamed: “Not in <em>my</em> neighborhood!”</p>
"Book Title" is in italics because it's a book title, it's not used for any kind of emphasis. One could also have used <span class="book_title">Book Title</span>. Animal and ship names are often set in italics, without any emphasis being implied.
"my" is in italics because it's emphasized. If you read it aloud you'd give it a special intonation.
They are two different things that by default look the same, but it doesn't mean they always have to look the same.