html em vs i

HTML
i has the purpose of presenting something in italicised style.
em has the purpose of giving emphasis to the content.

In practice emphasised content is typically displayed italicised,
so the difference on the face of it is non-existing from a
presentation standpoint. However, emphasis is semantic while
italics is presentation.
Source

Also in HTML: