HTML <i> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 15 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The <i> element is used to make text appear different from the normal text by making it italicize.

The <i> element is used for a range of different scenarios. The Common use cases are listed below.

  • alternative voice or mood
  • taxonomic designations - scientific classification names used to categorize and identify organisms in biology. (ex: "canis lupus" meaning wolf. )
  • idiomatic terms from other language ex: "Bona fide" meaning authentic in Latin
  • technical terms (ex: algorithm)
  • Transliterations (mapping of text from one script to another preserving pronunciation ex. English word "Republic" is Transliterated as "Respublika" in Russian.)
  • Thoughts
  • ship or vessel name

Historically in earlier versions of the HTML specification, the <i> tag was purely presentational, serving to render text in italics which is the origin of the <i> element's name. However, this is no longer the case, as these elements now convey semantic meaning rather than just visual styling.

Syntax: 
<i> - TEXT - </i>
Example: 

<p>
Walt Disney - <i>"if you can dream it, you can do it"</i>
</p>
Output:

Walt Disney - "if you can dream it, you can do it"



Tag Omission

The HTML <i> element must have both start tag and end tag.

ATTRIBUTES

<i> elements has only global attributes.

Frequently Asked Questions (FAQ)

What is the Difference Between HTML em Tag and HTML i tag?
The em element is used for text having stress emphasis in tone. While the i element is used for text which is made look different from normal text for special words like idiomatic text taxonomic designations, technical terms, Transliterations, Thoughts and ship or vessel name. It is not used for stress emphasis in tone.

What is the correct way to represent HTML icon - span tag or the i tag?
Many icon libraries like Font Awesome, Bootstrap Icons, or Material Icons use <i> as a default wrapper for icons. Using <i> tags for icons is technically incorrect, as per the HTML5 specification, but it is a common and accepted practice in web development, particularly with icon fonts. Developers should prioritize accessibility and consider <span> for better semantics, ensuring icons are properly labelled for screen readers.