EM vs. I – What is the Difference?
EM and I are inline elements, which means that they do not generate an automatic linebreak.
The text of the em (emphasis) and i (italic or idiomatic) HTML tags is displayed in the same style. By default, both HTML elements display text in italics. However, there is a crucial difference between them.
Unlike the I tag, the HTML EM tag has a semantic meaning, i.e. a meaning related to the content. Text marked up with EM is more important than normal text and is emphasized. The markup of the emphasis starts with <em> and has to be closed </em>.
In the typeface, text marked up with EM is usually displayed in italics. However, text that has been formatted this way does not necessarily need to be italicized in every browser.
The HTML I tag has no semantic meaning. It is just a visual representation. Text in italics starts with <i> and has to be closed with </i>.
The I tag (idiomatic) is used in HTML5 if individual words or an entire sentence should be formatted differently from the rest of the text. However, text that is marked up this way is not emphasized.
Emphasized Text is created by using the <em> tag.
<em>This text is empasized.</em>Text in italics without any special meaning is created with the <i> tag.
<i>This text is displayed in italics.</i>Avoid double markups such as
<em><strong>This important text is emphasized.</strong></em><strong><em>This emphasized text is important.</em></strong>The EM tag is less relevant than the STRONG tag. Instead of using <strong>, it is better to use <b> if emphasized text is to be displayed in italics and bold. This variant is ideal:
<em><b>This bold text is emphasized.</b></em><em><i>This italicized text is emphasized.</i></em><i><em>This emphasized text is displayed in italics.</em></i>Such constructions may be considered to be spam.