HTML Basics: Highlight text with EM or I – what is the difference? • logical text markup

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.

HTML Tag <em> vs. <i>

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.

Advertisement
Example

Emphasized Text is created by using the <em> tag.

<em>This text is empasized.</em>
Output of the HTML code
This text is empasized.
Example

Text in italics without any special meaning is created with the <i> tag.

<i>This text is displayed in italics.</i>
Output of the HTML code
This text is displayed in italics.
Notes

Avoid double markups such as

<em><strong>This important text is emphasized.</strong></em>
Output of the HTML code
This important text is emphasized.
or
<strong><em>This emphasized text is important.</em></strong>
Output of the HTML code
This emphasized text is important.

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>
Output of the HTML code
This bold text is emphasized.
Avoid markups like
<em><i>This italicized text is emphasized.</i></em>
or
<i><em>This emphasized text is displayed in italics.</em></i>

Such constructions may be considered to be spam.

Advertisement