<i> marks text set apart from ordinary prose, such as an alternate voice, a technical term, or an idiomatic phrase. It commonly appears italic, but modern meaning is not “make this text italic.”
An idiomatic phrase
The phrase belongs to a different language. lang identifies it independently of its italic appearance.
HTML and CSS
HTML
<p>
The French phrase <i lang="fr">bon appétit</i> wishes someone an enjoyable
meal.
</p>
<p>I <em>did</em> water the plants today.</p>CSS
i {
font-style: italic;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Meaning and content
I accepts phrasing content and global attributes. Use em when stress changes the sentence’s meaning, strong for importance, cite for a work title, and dfn for a term’s defining occurrence.
Technical terms and foreign idioms can be appropriate uses of i; they are not categorically excluded. If text has no distinct semantic quality and only needs italic design, use font-style on a suitable element.
Inspect the distinction
Set i { font-style: normal; } in the editor. The phrase still has its language and semantic role even though its slant is gone. Do not assume a screen reader will always announce the italic styling or change its voice.
Sources and browser support
MDN: i describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.