<i>
The <i> element has been repurposed in HTML5. Originally used simply to render text in italic, it now represents text in an alternate voice or mood, technical terms, transliterations, thoughts, or ship names. The visual presentation of italic is now secondary to its semantic purpose of marking text that is set apart from the normal prose.
This page was last updated on 2025-11-17
HTML5 Semantic Meaning
The <i> element is valid in HTML5 but with specific semantic meaning. It represents text in an alternate voice or mood, or text otherwise set apart from the normal prose:
- Technical terms or taxonomic names
- Foreign language phrases
- Transliterations
- Thoughts (as in narrative fiction)
- Ship names (traditionally italicized)
- Other text conventionally italicized
Important distinction: The <i> element does NOT convey emphasis (use <em> for that). It's for text that is set apart from normal prose for reasons other than emphasis.
Syntax
<i>alternate voice text</i>
The element is inline and requires both opening and closing tags. Consider using the lang attribute for foreign phrases:
<i lang="fr">bon appetit</i>
Proper Usage
Technical Terms
<p>The <i>phenotype</i> is the observable characteristics of an organism.</p>
Taxonomic Names
<p>The domestic cat (<i>Felis catus</i>) is a popular pet.</p>
Foreign Words
<p>In Japanese, <i lang="ja-Latn">kawaii</i> means cute.</p>
Thoughts in Narrative
<p><i>This can't be happening,</i> she thought to herself.</p>
Ship Names
<p>The <i>HMS Victory</i> is now a museum ship.</p>
Examples
Incorrect Usage (Emphasis)
<!-- Don't do this -->
<p>I <i>really</i> want to go to the party.</p>
Correct Alternative for Emphasis
<!-- Use em for emphasis -->
<p>I <em>really</em> want to go to the party.</p>
Incorrect Usage (Citations)
<!-- Don't do this -->
<p>I loved reading <i>Harry Potter</i>.</p>
Correct Alternative for Citations
<!-- Use cite for work titles -->
<p>I loved reading <cite>Harry Potter</cite>.</p>
Correct Usage (Alternate Voice)
<!-- Technical term -->
<p>The <i>zeitgeist</i> of the era influenced art and literature.</p>
When to Avoid
Avoid using <i> when:
- You want to emphasize text (use <em> instead)
- You're citing a work title (use <cite> instead)
- You're defining a term (use <dfn> instead)
- You want decorative italic text with no meaning (use CSS instead)
- The italic has no semantic purpose beyond visual style
Remember: <i> is for text in an alternate voice or mood, not for emphasis or decoration. Always consider whether a more specific semantic element would be more appropriate.
