Open In App

HTML <i> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

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

// Inline way to make italic text in html file
<i> Now content is Italic </i>

// Use in external style.css file to make italic
i {  
font-style: italic;
}

Usage

  • Use the <i> tag for words that you want to show differently from the normal phrase for readability purposes.
  • These semantic elements give contextual significance to text, while <i> primarily focuses on the text’s appearance.
  • Use <i> tag only when it is not marked up with these elements: 

Accepted Attributes

The <i> tag is also supported by Global attribute and Event Attributes 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 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 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

Supported Browsers

  • Google Chrome 1 and above
  • Microsoft Edge 12 and above
  • Firefox 1 and above
  • Opera 
  • Safari 


Last Updated : 11 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads