Difference between <i> and <em> tag of HTML
Last Updated :
23 Jul, 2025
The <i> and <em> tags in HTML both style text as italic, but they serve different purposes. The <i> tag is used for visual styling without semantic meaning, while <em> conveys emphasis and adds semantic importance, improving accessibility and meaning in content.
Note: The <em> tag adds semantic emphasis, while <i> simply applies italic styling for offset text.
HTML <i> tag
The <i> tag in HTML is used to display text in italics. It is generally used for stylistic purposes, such as denoting a different mood, voice, or foreign word, without adding any semantic emphasis to the content.
Syntax
<i> Content... </i>
Example: In this example we use of the <i> tag, rendering text in italics. It highlights the word "italic" and the tag name "<i>" itself inside a paragraph for illustration.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Use of <i> Tag</title>
</head>
<body>
<p>This is an
<i>italic</i>
word using the
<i><i></i>
tag in HTML.
</p>
</body>
</html>
Output:
tag Example OutputHTML <em> tag
The <em> tag in HTML is used to emphasize text, typically displayed in italics. It conveys semantic meaning, indicating that the emphasized text is important, which can also aid accessibility tools like screen readers in highlighting key content.
Syntax
<em> Content... </em>
Example: In this example we use of the <em> tag, which emphasizes text. It highlights the word "important" and the tag name "<em>" itself within a paragraph for demonstration purposes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Use of <em> Tag</title>
</head>
<body>
<p>This is an
<em>important</em>
word using the
<em><em></em>
tag in HTML.
</p>
</body>
</html>
Output:
tag Example 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