The <i> Element
As defined in the HTML Living Standard, the <i> element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text.
- Taxonomic designation: Homo sapiens
- Foreign phrase: The raison d'être of this site is accessibility.
- Internal thought: I hope this complies with standards, he thought.
<p>The <i>Queen Mary</i> sailed yesterday.</p>
View HTML Living Standard: The i element
Usage vs. Semantic Alternatives
The <i> element is often used purely for italics, but its semantic meaning is specific. Consider these alternatives first:
<em>: Use when you need to convey emphatic stress that changes the meaning of a sentence.<cite>: Use for the title of a work (e.g., a book or a movie).<dfn>: Use for the defining instance of a term.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
While many screen readers do not announce a voice change for <i> by default, the semantic tag allows for the relationship between the offset text and the prose to be programmatically available. This enables user-agent features or assistive technology settings that can distinguish technical terms or foreign phrases from standard text.
Best Practices
- Language Declaration: If the
<i>tag is used for a phrase in a different language, always include thelangattribute (e.g.,<i lang="fr">c'est la vie</i>) to satisfy WCAG SC 3.1.2 (Language of Parts). - Last Resort: Only use
<i>when no other semantic element is more appropriate for the specific context. - Icons: While many icon libraries (like Font Awesome) use the
<i>tag, this is technically a non-semantic usage. Use SVGs or<span>with appropriate ARIA roles for better accessibility.