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 way. 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 emphasized text begins with <em> and must end with the closing tag </em>.
In the typeface, text marked up with EM is usually displayed in italics. However, text that has been styled this way does not necessarily need to be italicized in every browser.
Emphasized text is created by using the <em> tag
<em>This text is empasized.</em>The HTML I tag has no semantic meaning. It is just a visual representation. Text in italics begins with <i> and ends with the closing tag </i>.
The I tag (idiomatic) is used in HTML5 when a different style should be used for some words or a full piece of text than for normal text. However, text that is marked up this way is not emphasized.
Text in italics without any special meaning is created with the <i> tag
<i>This text is displayed in italics.</i>Avoid double markup 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.