Um das nochmal mit (für Anfänger) etwas schneller verständlichen Worten zu sagen:
Mit <i> sagst du dem Browser deines Besuchers: "ich möchte, dass die Schrift, die jetzt kommt, kursiv aussieht"
Mit <em> sagst du dem Browser hingegen: "Die Schrift, die jetzt kommt, hat eine besondere Bedeutung. Hebe sie bitte hervor"
Es kann also sein, dass ein Surfer in seinem Browser eingestellt hat, dass alles, was eine besondere Bedeutung hat, nicht kursiv, sondern mit rotem Hintergrund dargestellt wird. Weil es eben etwas besonderes ist.
<i> sollte eigentlich gar nicht mehr benutzt werden, weil man dazu übergangen ist, dem Browser im HTML nur noch zu sagen, was für eine Bedeutung etwas hat. Also ob es wichtig, unwichtig, veraltet, usw. ist. Für das Aussehen, benutzt man nun CSS. Die Tatsache, dass es <i> immernoch gibt, liegt nur daran, dass viele Websites aus Urzeiten <i> benutzen und man (noch) nicht möchte, dass die Browser diese alten Websites falsch darstellen.