Difference between <i> and <em> tag of HTMLDifference between <i> and <em> tag of HTML
<i> Tag
is like putting something in italics just for looks, while <em> Tag
is for adding real emphasis or importance to the text, indicating that it should be read with more attention. They may both look italicized but <em>
have a meaning beyond appearance.
Note: By default, the visual result is the same. The main difference between these two tags is that the <em> tag semantically emphasizes the important word or section of words while the <i> tag is just offset text conventionally styled in italics to show an alternative mood or voice.
Table of Content
- <i> tag
- <em> tag
<i> tag :
The <i> tag in HTML is used to display the content in italic style. This tag is generally used to display the technical term, phrase, the important word in a different language.
Syntax :
<i> Content... </i>
<em> tag:
It is also one of the elements of HTML used in formatting texts. It is used to define emphasized text or statements.
Syntax :
<em> Content... </em>
Example-1 : In this example we will show this difference between the two tags with an example.
HTML
<!DOCTYPE html> < html > < head > < title >b Tag</ title > < style > body { text-align: center; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < p >< i >Iron Man</ i > is a hero.</ p > < p >Gfg is the < em >best</ em > educational site.</ p > </ body > </ html > |
Output:
Note: Here, there is no added emphasis or importance on the word “Iron Man”. It just indicates here iron isn’t a mineral or metal but it refers to a character. But in the next sentence the reader will use verbal stress on the word “best”.
Example-2 : In this example we will show this difference between the two tags with another example.
HTML
<!DOCTYPE html> < html lang = "en" dir = "ltr" > < head > < meta charset = "utf-8" > < title >Difference between < i > and < em > tag of HTML</ title > </ head > < body > < h1 >< i >This sentence is in Italic</ i ></ h1 > < h1 > < em >This sentence has emphasized meaning.</ em > </ h1 > </ body > </ html > |
Output:
Difference between <i> and <em> tag of HTML
Feature | <i> |
<em> |
---|---|---|
Syntax | font-style: italic; |
font-style: italic; font-weight: bold; |
Semantic Role | Presentational | Semantic (Emphasis) |
Accessibility | Generally ignored by screen readers | Recognized by screen readers as emphasis |
Nested Usage | Can be nested inside <em> or vice versa |
Nesting <em> within <i> or vice versa maintains emphasis |
Semantics | Not semantically specific, may not convey emphasis | Semantically specific for conveying emphasis in text |
Supported Browser:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4
Contact Us