Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML <i> Tag

  • Difficulty Level : Basic
  • Last Updated : 14 Dec, 2021

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. The <i> tag is a container tag that contains the opening tag, content & closing tag.

Syntax:

<i> Contents</i>

Accepted Attributes: This is a Global attribute, and can be used on any HTML element.

Below code examples illustrate the use of <i> tag in HTML.

Example 1: This is a simple example illustrating the <i> tag to make the italic text in HTML.



HTML




<!DOCTYPE html>
<html>
<head>
    <title>HTML i Tag</title>
</head>
    
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML i tag</h3>
    <div>
          
<p>
          <i>A Computer Science portal for geeks.</i
          It contains well written, well thought and well 
          explained computer science and programming articles 
        </p>
  
  
    </div>
</body>
</html>

Output:

HTML <i> Tag

Example 2: In this example, we have used <i> tag & <p> tag to illustrate the difference in the text appearance while rendering it.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>HTML Italic Tag</title>
</head>
    
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML i tag</h3>
      
<p>This is normal text written inside p tag</p>
  
  
      
    <!--HTML <i>(italic) tag is used here-->
    <i>This text is in italic font style</i
</body>
</html>

Output:

Italic font-style using HTML <i> Tag

Example 3: A text can be written in italics using CSS also. When the CSS font-style property is set to italic, then the text can be seen as follows:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>HTML Italic Tag</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML i tag</h3>
      
    <!--Example for font-style: italic -->
    <p style="font-style: italic;"
        This text content is in italic font.
    </p>
  
  
    <h5>Note:This example is only possible when the
        font-style property is kept "italic" in CSS
    </h5
</body>
</html>

Output:

Setting font-style to italic using font-style Property

Usage:

  • Use the <i> tag for words that you want to show differently from the normal phrase for readability purposes
  • The tags like <i> and <b> now define semantics rather than typographic appearance. So to display text in italic type, users can use the CSS font-style property.
  • Use <i> tag only when it is not marked up with these elements: 

Supported Browsers:

  • Google Chrome 93.0
  • Internet Explorer 11.0
  • Microsoft Edge 93.0
  • Firefox 92.0
  • Opera 78.0
  • Safari 14.1




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!