HTML <i> Tag
Last Updated :
11 Dec, 2023
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 >
< 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 >
< 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Â
Share your thoughts in the comments
Please Login to comment...