Difference between <em> and <i> tags in HTML
The <em> and <i> tags are among the commonly used HTML tags that often cause confusion among web developers, whereby they are used interchangeably for the same task.
In this article, you will learn the differences between the two tags and when to use each one.
The <em> Tag
The <em> tag stands for "emphasized text". It indicates that the text enclosed within it is important and should be taken with emphasis in a sentence or paragraph.
The text within this tag is typically displayed in italics by default. However, it can be styled differently using CSS.
Screen readers read the text within a <em> tag with more emphasis and in a stressed manner.
The <i> Tag
The <i> tag stands for "italicized text". It indicates that the enclosed text should be displayed in a different style from the surrounding text.
The text within this tag is always displayed in italics.
It is used to specify a part of the text in a different tone or mood but without adding any semantic meaning or importance to it. It is often used to indicate technical terms, phrases from different languages, titles of works (eg books or movies), etc.
The CSS font-style property with the value "italic" is often used as an alternative to this tag.
.selector {
font-style: italic;
}
The difference between the two tags
The main difference between the <em> and <i> tags are their semantic meaning. The <em> tag is used to add emphasis to the text which makes it more important or stressed within a sentence or paragraph.
In contrast, the <i> tag is used to display the text in a different tone or style (italic) from the surrounding text without adding any semantic meaning to it.
Examples
Let's have a look at the sentence below:
"You have to work hard!"
If we want to emphasize that working hard is a requirement or necessity, we can use the <em> tag:
<p>You <em>have to</em> work hard!</p>
Output:
You have to work hard!
In this example, we indicate that the need to act (having to) is an important detail that the reader should pay attention to.
If we want to italicize a book or movie title within a sentence, we can use the <i> tag:
<p>Have you watched <i>The Lord of the Rings</i>?</p>
Output:
Have you watched The Lord of the Rings?
The <i> tag indicates that "The Lord of the Rings", a movie title, is different from the surrounding text.
Search engines and screen readers can use the <em> tag to provide better accessibility and search results. On the other hand, the <i> tag is simply a visual styling element.
