Difference between <i> and <em> tag of HTML
Last Updated :
30 Jan, 2024
<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.Â
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>
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 >GeeksforGeeks</ 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:Â
output
Difference between <i> and <em> tag of HTML
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...