Nowadays, when you are visiting websites on the Internet, you are almost familiar with the way some words or even phrases render differently from a regular (normal) font type.

The Italic refers to “cursive typefaces based on a stylized form of calligraphic handwriting”, and the font style originated in Italy. The influence from calligraphy can be seen in their usual slight slanting to the right, and is definitely different from what does mean oblique writing.
When you may use <i> HTML element? It is recommended to use the <i> HTML element when you want to define terms (i.e. "the prime number is a natural number which has exactly two distinct natural number divisors: 1 and itself"), to emphasis foreign words (i.e. "Au revoir - she said, touching his hand with a tender gesture.", names of ships (i.e. "Titanic sunk at it's first and only journey.") etc.
In typography, emphasis is the exaggeration of words in a text with a font in a different style from the rest of the text—to emphasis them. So, in this situation, emphasis could mean an italic or an oblique or a bold face font type, or even small caps or adding space between letters.
A web browser displays the words between the <em> HTML starting and ending tag most often as an italic writing, but some browsers can show the text in a different way.
On the other hand if you think from a search engine optimization for your content, it seems that using <em> rather than <i> HTML element will give to your words more importance.

As a conclusion, the text effect using the <i> HTML element can be achieved using Cascading Style Sheets rules, and the use of this element could be deprecated to some point. Using <em> instead will add more importance to your words or sentences and in most cases the visual effect will be the same.