HTML <i> Tag

The <i> tag renders text in italic.

This can be used to display idioms, terminologies, ideas, and more.



This <i> tag italicizes a single word in the text.

Van Gogh and Gauguin visited Montpellier in December 1888.

    Van Gogh and Gauguin visited 
    <i>Montpellier</i> in December 1888.
i = italic

Using <i>

It is used to display idioms, technical terms, translations, and other items.

Use this element when no other semantic tag is appropriate, such as:

  • <em> - used to add emphasis to text
  • <strong> - defines an important text
  • <mark> - defines highlighted text
  • <cite> - defines a citation of a body of work/li>
  • <dfn> - defines an instance of a term

More Examples

An <i> tag that displays a well-known quote.

"To be or not to be, that is the question" -- by William Shakespeare.

  <i>"To be or not to be, that is the question"</i> 
  -- by William Shakespeare.

Attributes for <i>

The <i> element has no attributes, but it does accept global attributes. The following are occasionally used.

Attribute Value Description
id   value Provides the i element with a unique identifier.
class   classnames Assigns one or more classnames to the i element.
style   CSS-values Assigns CSS style values to the i element.

For additional global attributes see our global attributes list.

Did you know?

Did you know?

Why do icon designers use <i> to render icons?

Icon sets, such as, Font Awesome, Glyphicons, or Google Fonts, commonly use the <i> tag.

One reason is that <i> is shorter than <span>.

Another reason is that the letter i can also stand for 'icon'.

Technically, either the <i> or the <span> tag can be used to render icons.

A twitter icon by Font Awesome created with the <i> tag.

<i class="fab fa-twitter"></i>

Text Tags

The <i> tag is part of a group of tags that are used to create and format text documents. This group is referred to as the Text tag group. Together, they allow you to create comprehensive HTML text documents.

Here is a list of text tags.

Element Description
<h1>-<h6> Defines text headings in 6 different sizes
<p> Creates a paragraph
<span> Container for one or more inline text elements
<br> Creates a line break
<sup> Specifies superscript text
<sub> Specifies subscripted text
<u> Specifies underlined text
<i> Specifies italic text
<b> Specifies bold text
<em> Marks text that needs emphasis
<strong> Indicates text that is important or with high urgency
<del> Defines deleted text
<ins> Defines inserted text
<ruby> Represents a small annotation with pronunciation of text
<kbd> Specifies keyboard input, such as, CTRL or ALT
<wbr> Specifies a preferred word-break location for long words

Browser support

Here is when <i> support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

Last updated on Sep 30, 2023