Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

<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 :

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>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

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


Last Updated : 30 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads