Difference between <i> and <em> tag of HTML
1. <i> tag : It is one of the element of HTML which is used in formatting HTML texts. It is used to define a text in technical term, alternative mood or voice, a thought, etc.
Syntax :
<i> Content... </i>
2. <em> tag : It is also one of the element of HTML used in formatting texts. It is used to define emphasized text or statements.
Syntax :
<em> Content... </em>
By default, the visual result is the same. The main difference between these two tag is that the <em> tag semantically emphasizes on the important word or section of words while <i> tag is just offset text conventionally styled in italic to show alternative mood or voice.
Below is the code to show this difference between the two :
Example-1 :
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:
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 :
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
Though they appears to be same but semantic meaning is different. Supported Browser : The browser supported by <i> and <em> tag are listed below.
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Please Login to comment...