Element of
Fonts and Web Typography
What does <i> do?
The <i> element is used to differentiate words from the surrounding text by styling the marked text in italics without implying any added emphasis to the italicized words.
Display
inline
Usage
textual

Code Example

<p>The <code>&lt;i&gt;</code> element is used for <i>italics</i>.

The <i> element is used for italics.

<i> vs. <em>

The <i> element makes the surrounded text display as italic. The <em> element indicates textual emphasis, which is communicated as italic-styled text. So what's the difference? The <em> element means something, while the <i> element does not mean anything at all other than that the text should be italicized. So, when should you use one and when the other? There are few, if any, hard-and-fast rules, but generally speaking, if you want emphaisze some text, you should use the <em> element. On the other hand, if italics is only matter of style (e.g., Latin typographical shorthand) you may prefer to use the <i> element.

And don't forget <dfn>

The definition element (<dfn>), which is used to markup a word or phrase that is defined in the surrounding text, also styles the text as italics by default. The rules for using this element, instead of <i>, are much more straightforward, though. It should only be used when marking up a word that is being defined.

Long-form italics

Sometimes it is desirable to set off several lines of text with italics. This might be a shorrt introduction to content, a note to the reader, "fine print" of one sort or another. You should generally avoid the <i> element here as well. The <i> element is essentially a typographical element, and is inline (not block). This means that it should be used to mark up a few words or a phrase in a larger context. If you want to set a whole paragraph as italics, give it a particular class or id and use CSS.

Browser Support for i

AllAllAllAllAllAll