The HTML <i> tag
The HTML <i> element marks text in an alternate voice or mood — technical terms, foreign-language phrases, a thought, a ship name — rendered italic. For text you want to emphasize (changing the meaning), use <em> instead.
Overview
The <i> element marks text that is in a different voice or mood from the surrounding prose — traditionally shown in italics. Its uses are specific: a foreign-language phrase (c'est la vie), a Latin taxonomic name, a technical term on first mention, a character's unspoken thought, or a transliteration.
What it is not is emphasis. When italics would represent stress that changes how a sentence is read aloud, use <em> instead — that distinction is the whole point of having both elements. <i> says "this is set apart"; <em> says "stress this."
For purely decorative italics with no semantic role, the CSS font-style: italic declaration is the right tool. Like its bold sibling <b>, <i> was redefined in HTML5 to carry this "alternate voice" meaning rather than just "make it italic."
Syntax
<p>The term <i>lorem ipsum</i> is placeholder text.</p>Example
<p>She whispered <i lang="fr">au revoir</i> and left.</p>Best practices
- Use
<i>for text in an alternate voice — foreign phrases, technical terms, taxonomic names, inner thoughts. - For italics that represent emphasis, use <em> instead.
- For purely decorative italics, set
font-style: italicin CSS. - Add the
langattribute on foreign-language phrases so assistive technology pronounces them correctly.
Frequently asked questions
What is the difference between i and em?
<i> marks text in an alternate voice or mood (a foreign phrase, a term, a thought) with no emphasis.When should I use the i element?
Is the i element deprecated?
How do I make italic text without semantics?
font-style: italic declaration on the element you want italicized.