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>
<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>
<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 1 and above
- Internet Explorer
- Microsoft Edge 12 and above
- Firefox 1 and above
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
19 Jul, 2022
Like Article
Save Article