← Back to All Tags

<i>

Highlights text segments in an alternate voice or mood

Definition and Usage

The <i> element establishes a part of text in an alternate voice or mood. The content inside is typically displayed in italic type.

The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, or some other text that is typically stylistically offset from normal text without conveying extra importance or emphasis.

Note: The <i> tag is a stylistic element without semantic meaning for emphasis. For semantic emphasis, use <em> instead. The <i> element should be used when there is no more appropriate semantic element.
Tip: Use <i> for technical terms, foreign words, thoughts, or taxonomic names. Use <em> when you want to emphasize text semantically. Use <strong> for important text.

Browser Support

The <i> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Examples

Technical Terms

Use <i> for technical terms:

Example

<p>The <i>HTTP</i> protocol is the foundation of data communication on the web.</p>

<p>In programming, a <i>variable</i> is a storage location for data.</p>

Foreign Words and Phrases

Mark foreign language phrases with <i>:

Example

<p>The French phrase <i lang="fr">c'est la vie</i> means "that's life".</p>

<p>We enjoyed the restaurant's <i lang="it">dolce vita</i> atmosphere.</p>

<p>The German word <i lang="de">Schadenfreude</i> has no direct English equivalent.</p>

Thoughts and Internal Dialogue

Represent a character's thoughts:

Example

<p>John looked at the clock. <i>I'm going to be late,</i> he thought.</p>

<p>She hesitated at the door. <i>Should I go in?</i></p>

Ship Names and Vessel Names

Use <i> for names of ships, aircraft, or spacecraft:

Example

<p>The <i>Titanic</i> was a British passenger liner that sank in 1912.</p>

<p>Neil Armstrong flew aboard <i>Apollo 11</i> to the moon.</p>

<p>The <i>USS Enterprise</i> is a famous naval vessel.</p>

Taxonomic Names

Scientific and taxonomic names are styled with <i>:

Example

<p>The scientific name for humans is <i>Homo sapiens</i>.</p>

<p>The domestic dog is classified as <i>Canis familiaris</i>.</p>

<p>Roses belong to the genus <i>Rosa</i> in the family Rosaceae.</p>

Icons with Text

Using <i> for icon fonts (common practice with Font Awesome):

Example

<!-- Font Awesome icons -->
<button><i class="fas fa-heart"></i> Like</button>

<a href="#"><i class="fas fa-home"></i> Home</a>

<p><i class="fas fa-info-circle"></i> Information</p>

<i> vs <em> Comparison

Understanding when to use <i> versus <em>:

Feature <i> Tag <em> Tag
Meaning Stylistic offset (alternate voice/mood) Semantic emphasis
Default Style Italic Italic
Semantic Value None (presentational) High (conveys emphasis)
Screen Reader No special announcement Announced with emphasis
Use Cases Foreign words, technical terms, thoughts, ship names, taxonomic names, icons Stressed emphasis, importance in context
Example The word <i>bonjour</i> is French You <em>must</em> complete this task

Example Comparison

Example

<!-- Using <i> for foreign phrase (stylistic) -->
<p>The phrase <i lang="fr">bon appétit</i> means "enjoy your meal".</p>

<!-- Using <em> for semantic emphasis -->
<p>You <em>must</em> wear a helmet when riding a bike.</p>

<!-- Using <i> for technical term -->
<p>The <i>algorithm</i> processes data efficiently.</p>

<!-- Using <em> to stress a word -->
<p>I didn't say she stole the money, I said <em>he</em> stole the money.</p>

When to Use <i>

Use <i> for:
  • Technical terms: Programming keywords, technical jargon
  • Foreign phrases: Words from other languages (use with lang attribute)
  • Thoughts: Internal dialogue or thoughts in narrative
  • Taxonomic names: Scientific species names (e.g., Homo sapiens)
  • Ship/vessel names: Names of ships, aircraft, spacecraft
  • Book/movie titles: When appropriate for context
  • Icons: Icon fonts (Font Awesome, etc.)
  • Idiomatic phrases: Fixed expressions or sayings

When to Use <em> Instead

Use <em> when you want to:
  • Add stress or emphasis to words
  • Change the meaning of a sentence through emphasis
  • Indicate something important to understand
  • Convey semantic importance to screen readers
  • Show vocal emphasis that would be spoken differently

Emphasis Changes Meaning

Example

<p><em>I</em> didn't say you were wrong.</p>
<!-- Emphasis: Someone else said it, not me -->

<p>I <em>didn't</em> say you were wrong.</p>
<!-- Emphasis: I'm denying that I said it -->

<p>I didn't say <em>you</em> were wrong.</p>
<!-- Emphasis: I said someone else was wrong -->

<p>I didn't say you were <em>wrong</em>.</p>
<!-- Emphasis: I said something else about you -->

CSS Styling for Italic Text

Custom Italic Styles

Example

<style>
  /* Change color of italic text */
  i {
    color: #3b82f6;
    font-style: italic;
  }

  /* Remove italic style but keep semantic meaning */
  i.no-italic {
    font-style: normal;
    color: #8b5cf6;
    font-weight: 500;
  }

  /* Foreign phrases with background */
  i[lang] {
    background-color: #fef3c7;
    padding: 2px 6px;
    border-radius: 3px;
  }
</style>

<p>This is <i>italic text</i> in blue.</p>
<p>This is <i class="no-italic">not italic</i> but styled.</p>
<p>The phrase <i lang="fr">bon voyage</i> has a background.</p>

Icon Styling

Example

<style>
  i.icon {
    font-style: normal;
    font-size: 20px;
    color: #ef4444;
    margin-right: 8px;
  }

  i.icon-large {
    font-style: normal;
    font-size: 48px;
    color: #3b82f6;
  }
</style>

<p><i class="icon fas fa-star"></i>Featured Item</p>
<div><i class="icon-large fas fa-check-circle"></i></div>

Accessibility Considerations

  • No Semantic Emphasis: Screen readers do not announce <i> text differently
  • Use Lang Attribute: Always use lang attribute for foreign phrases so screen readers pronounce correctly
  • Icons Need Labels: When using <i> for icons, provide text alternatives or aria-label
  • Don't Rely on Styling: Never use <i> just to make text italic visually; use CSS instead
  • Semantic Meaning: If the italic text conveys emphasis or importance, use <em> or <strong>
  • Alternative Content: Provide context so meaning is clear without relying on visual styling

Accessible Icon Example

Example

<!-- Good: Icon with visible text -->
<button><i class="fas fa-trash"></i> Delete</button>

<!-- Good: Icon with aria-label -->
<button aria-label="Delete">
  <i class="fas fa-trash" aria-hidden="true"></i>
</button>

<!-- Bad: Icon without any text alternative -->
<button><i class="fas fa-trash"></i></button>
Accessibility Tip: When using <i> for foreign words or phrases, always include the lang attribute to help screen readers pronounce the text correctly. Example: <i lang="es">hola</i>

Best Practices

DO:
  • Use <i> for technical terms, foreign phrases, and thoughts
  • Add lang attribute when using foreign words
  • Use <i> for icon fonts (common practice)
  • Consider more semantic alternatives first (<em>, <cite>, <dfn>)
  • Use CSS to control styling
  • Provide text alternatives for icon-only uses
DON'T:
  • Use <i> just to make text italic (use CSS font-style: italic instead)
  • Use <i> for semantic emphasis (use <em>)
  • Use <i> for important text (use <strong>)
  • Forget lang attribute for foreign words
  • Use icons without text alternatives
  • Overuse italic styling as it reduces readability

Related Tags

  • <em>

    Emphasized text (semantic)

  • <strong>

    Important/strong text

  • <b>

    Bold text (stylistic)

  • <cite>

    Citation/reference title

  • <dfn>

    Definition term

  • <mark>

    Marked/highlighted text