Last Updated : 26 Aug, 2024
Summarize
Comments
Improve
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.
<!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.
<!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:
<!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
HTML <i> Tag – FAQs
Is the <i> tag only for italicizing text?
No, the <i> tag is meant for text with a different tone or mood, such as emphasizing titles or names, not just for stylistic italics.
How does the <i> tag differ from the <em> tag?
The <i> tag is for non-emphatic text that has different semantic importance, while the <em> tag is for text that needs emphasis.
Can the <i> tag be styled differently than italics?
Yes, the <i> tag can be styled with CSS to have different text styles, colors, or effects.
Is the <i> tag inline or block-level?
The <i> tag is an inline element.
Is the <i> tag accessible for screen readers?
Yes, but it is better to use it in the correct context, as screen readers typically do not treat it as emphasized text.
Improve
