What is the difference between <em> and <i> tag in html?

Question

Both seemed to do the same work. Why would someone use <em> over <i> to make the text italic?

Answer 1

Manav Roy , while yes, <em> and <i> render SIMILAR outputs, but they are not exactly the same.
<em> is a semantic tag that tells search engines and screen readers that the text inside the <em> tags carry more stress and emphasis compared to the other words and phrases in the output. (It is similar to the way I typed 'SIMILAR' earlier here in uppercase to emphasize it.)
Screen readers may pronounce emphasised texts differently as well.
Additionally, you can nest an <em> tag inside another <em> tag for greater effect.

On the other hand, <i> tag is only for styling texts. They do not add any special meaning(s) and are generally used for foreign phrases, technical jargon etc.

Eg: Ted Bundy's <i> modus operandi </i> was <em> feigning injury </em>.

Answer 2

It helps screen readers read to vision impaired people