HTML <i> Tag
The HTML <i> tag marks text in an alternate voice or mood — foreign phrases, technical terms, taxonomic names, thoughts — shown in italic. See examples.
The HTML <i> tag marks a span of text that is set off from the surrounding prose because it is in a different voice or mood. By default it is rendered in italic, but its purpose is semantic, not decorative. This chapter explains what the <i> tag really means, how it differs from <em>, when to reach for it, and how it behaves for assistive technology.
What <i> actually means
In HTML5, <i> represents text that stands apart from normal prose without implying any extra stress emphasis. Typical uses include:
- Foreign words or phrases —
<i lang="la">in situ</i>,<i lang="fr">déjà vu</i>. - Technical terms being introduced or named, such as a method name in a tutorial.
- Taxonomic (scientific) names —
<i>Homo sapiens</i>,<i>Felis catus</i>. - Names of ships or vessels —
<i>HMS Beagle</i>. - A character's thought quoted inline within narrative prose.
The browser renders all of these in italics, but the meaning is "this run of text is conceptually distinct," not "say this louder."
For foreign words, add the lang attribute (for example lang="la" for Latin). This tells screen readers to switch pronunciation rules and helps translation tools skip text that should not be translated.
<i> vs. <em>
This is the distinction that matters most:
<em>conveys stress emphasis — the word you would say more forcefully to change the meaning of a sentence. "Did you eat my lunch?" points the finger at a specific person.<i>conveys an alternate voice or mood with no added emphasis — a foreign term, a thought, a species name.
A quick test: if reading the text aloud would naturally make you lean on the word, use <em>. If the word is simply of a different kind (foreign, technical, a title-like name), use <i>.
Related presentational-but-semantic siblings:
<b>— draws attention (keywords, product names) with no extra importance.<strong>— marks text of strong importance, seriousness, or urgency.<cite>— the title of a cited creative work (book, film, paper).<mark>— text highlighted for reference or relevance.
Accessibility
The <i> element has no implicit ARIA role and conveys no stress emphasis to screen readers — a screen reader will not change its tone for <i> text. So <i> is purely a hint about the kind of text, not its importance.
Because of this, if the emphasis genuinely needs to reach assistive-technology users (the meaning of the sentence depends on it), use <em> instead, which screen readers can announce with vocal stress. Reserve <i> for cases where italics are about category, not force.
Syntax
The <i> tag comes in pairs. The content is written between the opening (<i>) and closing (</i>) tags.
Example of the HTML <i> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Foreign phrase, with lang for correct pronunciation -->
<p>The samples were examined <i lang="la">in situ</i> before removal.</p>
<!-- Taxonomic name -->
<p>The domestic cat is <i>Felis catus</i>.</p>
<!-- A character's thought -->
<p>She paused at the door. <i>What if no one is home?</i></p>
</body>
</html>Attributes
The <i> tag supports the Global Attributes and Event Attributes.
Styling the <i> tag
Keep <i> for its semantic meaning and use CSS only to adjust its appearance — there is no need to replace it with a non-semantic element. For example, you can keep the italic default while changing the color:
<style>
i {
color: #555;
}
</style>
<p>The domestic cat is <i>Felis catus</i>.</p>If you only want italics for a visual reason with no semantic intent, prefer the CSS font-style property on a regular element instead of adding an <i> tag.