<i>
Text in a different tone or voice: foreign expressions, Latin names, a character’s thoughts, technical terms.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>Every change here goes through code review, <i lang="fr">de rigueur</i> before merging.</p>
<p>She looked at the red error in the console. <i>But it worked yesterday</i>, she thought.</p>Definition and usage
#The <i> element marks a piece of text that differs from the rest in tone or character: a foreign expression, a Latin species name, a technical term, a ship’s name, or a character’s thoughts. Browsers display it in italics.
Unlike <em>, it doesn’t add stress and doesn’t change the meaning of the sentence. Mark the titles of works with <cite>, and a term defined in a sentence with <dfn>.
Add the global lang attribute to foreign-language expressions, e.g. <i lang="fr">de rigueur</i>. A screen reader will then read them with the right pronunciation.
Many icon libraries use <i> to insert icons. It works, but it’s a misuse of its meaning. A <span> with an aria-hidden="true" attribute works better.
Syntax
#<i>text in a different tone</i>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
Default CSS
#Most browsers display this element with these default styles:
i {
font-style: italic;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Add
langto foreign-language phrases, so a screen reader reads them correctly. - Don’t insert icons with
<i>. Use<span aria-hidden="true">or an SVG image with a description. - If a piece of text needs to be pronounced with emphasis because it changes the meaning of the sentence, choose
<em>.
Related entries
#- <em> vs <i><em> is stress that changes the meaning of a sentence when read aloud. <i> marks a different tone: foreign words, names or thoughts, without changing meaning.
- <em>Stress in a sentence: a word that, read aloud, is pronounced with emphasis.
- <b>Draws attention to a piece of text without giving it any extra weight, e.g. keywords.
- <cite>The title of a work: a book, an article, a movie, a song, a game, or a piece of software.
- <dfn>A term being defined at this point in the text, that is, the first, explanatory use of the concept.
- <span>A generic inline container with no meaning, for styling a piece of text.
Spotted a mistake or missing an example? Write to us.