Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between <i> and <em> tag of HTML

  • Difficulty Level : Easy
  • Last Updated : 04 Dec, 2020

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 :

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<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 senetence is in Italic</i></h1>
    <h1>
      <em>This sentence has emphasized meaning.</em></h1>
</body>
  
</html>

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :