0%

<i> Idiomatic text

Text in another voice: foreign words, terms, thoughts, ship names. Italic.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<i> sets text apart from the surrounding prose. Typical cases are a technical term, a phrase in another language, a character's thoughts, a taxonomic name and the name of a ship.

It carries no stress; that is what <em> is for. Foreign phrases should also get a lang attribute so screen readers pronounce them properly. Using i for icons is a habit left over from icon fonts, and it means nothing.

The i element definition in the HTML standard (opens in a new tab) covers technical terms, foreign phrases, thoughts and ship names. The Strong and Emphasis lesson compares it with em.

Syntax

<i>text in another voice</i>

When to use it

The <i> element is for text in a different voice from the prose around it: a species name in a nature blog, a stage direction in a play script, a dream sequence in a story, the name of a ship or train, or a word mentioned as a word, as in "the word their is often misspelled".

Pick the more specific element when one exists. A title of a book or film is cite. A term defined in that sentence is dfn. Stress that changes meaning is em. Only when none of these fits is i the right choice.

Two details are easy to miss. The standard recommends a class that explains each use, such as class="taxonomy" or class="stage", so different kinds of italic text can be styled differently later. And loan words that have become ordinary English, like cafe or piano, do not need i at all; mark only phrases your readers would still see as foreign.

Live example

Edit the code and watch the preview.

<p>The <i lang="la">Felis catus</i> is the common house cat.</p>
<p><i>Maybe I should leave now,</i> she thought.</p>

More examples

Stage directions in a script

In a play script, stage directions are not spoken. They are a different kind of text, so i with a class sets them apart while the dialogue stays in normal type.

<p><b>ANNA:</b> Is anyone there?</p>
<p><i class="stage">She switches on the light and looks around the kitchen.</i></p>
<p><b>TOM:</b> Only me. I made pancakes.</p>

Words mentioned as words

When you talk about a word rather than use it, typographic convention sets it in italics. The class records why the i element is there. Without it, readers could mistake the words for part of the sentence.

<p>The words <i class="term">their</i>, <i class="term">there</i> and <i class="term">they're</i> sound the same but mean different things.</p>

Tip: Foreign phrase inside i? Add lang.

Browser support

i is supported by every browser and shown in italics by default. Like b, it was redefined in HTML5 with a meaning ("idiomatic text" or text in an alternate voice) instead of being removed, and it remains fully valid in the HTML Living Standard.

Accessibility

When an i element holds foreign words, give it a lang attribute and screen readers switch pronunciation (WCAG 3.1.2). The W3C note Understanding Language of Parts (opens in a new tab) explains the requirement.

Common mistakes

Wrong

<button><i class="icon-trash"></i></button>

Right

<button aria-label="Delete"><span class="icon-trash" aria-hidden="true"></span></button>

i is not for icons, and an icon-only button needs an accessible name.

Frequently asked questions

Is the i tag deprecated in HTML?

No. HTML5 kept <i> and gave it a semantic definition: text in an alternate voice or mood, such as a foreign phrase, a taxonomic name, a technical term, a ship name or an inner thought. Foreign words also get a lang attribute, as in <i lang="fr">bon appetit</i>. The typographic conventions it follows are covered in Wikipedia's article on italic type (opens in a new tab).

Should I use the i tag for icons?

Better not. Some icon libraries use <i> because it is short, but that misuses the element, and <span> or an inline <svg> make better homes for icons. Whichever you pick, hide a decorative icon with aria-hidden="true" and give an icon-only button a text label, so screen reader users know what it does.

Related text elements

<p>One paragraph of text.<br>Breaks the line inside text, as in a postal address or a poem.<hr>A change of topic between paragraphs, drawn as a horizontal line.<pre>Shows text exactly as typed, spaces and line breaks included.<blockquote>A longer quotation from another source, set apart as its own block.<div>A generic block box with no meaning, for grouping and styling.<span>A generic inline wrapper with no meaning, for styling part of a line of text.<strong>Text that is important, serious or urgent. Shown in bold by default.<em>Stress emphasis that changes what a sentence means. Italic by default.<b>Makes text stand out without adding importance, as with keywords. Bold by default.<u>Text with an unspoken annotation, such as a flagged spelling error.<s>Content that is no longer accurate or relevant, drawn crossed out.<mark>Highlighted text, like a marker pen, showing relevance in the current context.<small>Side comments and fine print, like copyright lines or legal notes.<sub>Subscript text, set below the line, as in H2O.<sup>Superscript text, set above the line, as in exponents or 1st.<code>A fragment of computer code, set in a monospace font.<kbd>Keys or text the user should press or type.<samp>Sample output from a program or a computer system.<var>A variable in math or in code. Italic by default.<q>A short quotation inside a sentence. The browser adds the quote marks.<cite>The title of a creative work: a book, film, song, game or article.<abbr>An abbreviation or acronym, with an optional expansion in title.<dfn>Marks the term that the surrounding sentence or paragraph defines.<time>Marks a date, time or duration and gives it a machine-readable value.<data>Ties visible content to a machine-readable value.<del>Text that was removed from the document. Struck through by default.<ins>Text that was added to the document. Underlined by default.<wbr>A spot where the browser may break a long word if it has to.<bdi>Isolates text of unknown direction, such as user names.<bdo>Forces a text direction and overrides the normal bidi algorithm.<ruby>Small annotations above or beside text, mostly for East Asian pronunciation.<rt>The small reading or note in a ruby annotation.<rp>Fallback brackets around ruby text, shown only where ruby is unsupported.