<i> HTML Tag
- Element of
- Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
- What does
<i> HTML Tag
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
Contents
Code Example
<p>The <code><i></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
All | All | All | All | All | All |