HTML <i> Element
The HTML <i> element represents text that is set apart from the surrounding content because it is expressed in an alternate voice or mood or has a different conventional meaning. It can be appropriate for technical terms, idiomatic phrases, taxonomic names, transliterations, and other text that is traditionally presented differently from normal prose.
Syntax
<p>The scientific name for the domestic cat is <i>Felis catus</i>.</p>The <i> element requires both an opening and closing tag. The text between the tags is identified as being different from the surrounding prose for a specific semantic or conventional reason.
Attributes
The <i> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses the <i> element for the scientific name of a plant, where italic styling is a conventional way of distinguishing the name from the surrounding text.
Usage Notes
Use the <i> element when text needs to be distinguished from the surrounding prose because it has an alternate voice, mood, or conventional meaning. Examples can include technical terms, foreign idiomatic phrases, taxonomic names, and transliterations.
Browsers normally display text inside the <i> element in italics, but italic styling is only its default visual presentation. The element should be selected because of the meaning of the text rather than because italics are desired.
Use the <em> element when text requires stress emphasis. Use the <strong> element when the content has strong importance, seriousness, or urgency.
If text only needs to appear italic for visual design purposes and has no special semantic meaning, use CSS such as font-style: italic; instead.
When the <i> element identifies a particular type of content, a class attribute can be useful for describing and styling that purpose consistently.
Accessibility
Do not rely on the default italic appearance of the <i> element alone to communicate information that users must understand. Some users may not perceive the visual difference, and assistive technologies do not necessarily announce the text differently simply because it is contained in an <i> element.
Choose the element that best represents the meaning of the content. When stress emphasis is intended, use <em>; when strong importance is intended, use <strong>.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <i> Element .
Related Elements
<em> - Represents text with stress emphasis that can affect the meaning of a sentence.
<strong> - Represents content with strong importance, seriousness, or urgency.
<b> - Draws attention to text without indicating additional importance or emphasis.
<cite> - Represents the title of a creative work.