- The Idiomatic Text Element

The `` Element

Inline HTML 2.0

The idiomatic text element represents text in an alternate voice or mood, or otherwise offset from normal prose. It’s typically rendered in italic but has semantic meaning beyond visual styling.

Quick Example

<p>The term <i>semantic HTML</i> refers to meaningful markup.</p>
<p>She thought, <i>What a beautiful day!</i></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The term <i>semantic HTML</i> refers to meaningful markup.</p>
<p>She thought, <i>What a beautiful day!</i></p>

Syntax

<i>text in alternate voice</i>

The  element is for text that’s set off from normal prose for specific semantic reasons.

`` vs ``

A critical distinction in HTML:

<!-- Alternate voice/mood, no stress emphasis -->
<p>The word <i>semantics</i> comes from Greek.</p>
<p>The ship <i>HMS Beagle</i> sailed in 1831.</p>

Use  for stylistic offset without emphasis.

<!-- Stress emphasis that changes meaning -->
<p>I <em>really</em> need this done today.</p>
<p>You should <em>always</em> save your work.</p>

Use  for stress emphasis when speaking.

Common Use Cases

Technical Terms

<p>In programming, the term <i>variable</i> refers to a storage location.</p>
<p>The <i>DOM</i> represents the structure of a web page.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>In programming, the term <i>variable</i> refers to a storage location.</p>
<p>The <i>DOM</i> represents the structure of a web page.</p>

Foreign Language Phrases

<p>The French phrase <i lang="fr">c'est la vie</i> means "that's life."</p>
<p>He said <i lang="es">¡Hola!</i> when he entered.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The French phrase <i lang="fr">c'est la vie</i> means "that's life."</p>
<p>He said <i lang="es">¡Hola!</i> when he entered.</p>

Taxonomic Names

<p>The scientific name for humans is <i>Homo sapiens</i>.</p>
<p>The <i>Panthera leo</i> (lion) is a carnivorous mammal.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The scientific name for humans is <i>Homo sapiens</i>.</p>
<p>The <i>Panthera leo</i> (lion) is a carnivorous mammal.</p>

Ship Names

<p>The <i>RMS Titanic</i> sank in 1912.</p>
<p>The spacecraft <i>Voyager 1</i> has left the solar system.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The <i>RMS Titanic</i> sank in 1912.</p>
<p>The spacecraft <i>Voyager 1</i> has left the solar system.</p>

Thoughts and Internal Dialogue

<p>She looked at the sky and thought, <i>It's going to rain.</i></p>
<p>He wondered, <i>Should I say something?</i></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>She looked at the sky and thought, <i>It's going to rain.</i></p>
<p>He wondered, <i>Should I say something?</i></p>

Dream Sequences or Fantasy

<p>In the dream, he heard a voice saying, <i>Follow the white rabbit.</i></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>In the dream, he heard a voice saying, <i>Follow the white rabbit.</i></p>

Alternative Voice or Tone

<p>The narrator continued: <i>And so the adventure began...</i></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The narrator continued: <i>And so the adventure began...</i></p>

Idiomatic Expressions

When introducing an idiom or phrase being discussed:

<p>The expression <i>break a leg</i> means "good luck" in theater.</p>
<p>The phrase <i>raining cats and dogs</i> means heavy rain.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The expression <i>break a leg</i> means "good luck" in theater.</p>
<p>The phrase <i>raining cats and dogs</i> means heavy rain.</p>

With Language Attribute

Always use lang attribute for foreign text:

<p>She greeted me with <i lang="ja">こんにちは</i> (hello in Japanese).</p>
<p>The German word <i lang="de">Schadenfreude</i> has no direct English translation.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>She greeted me with <i lang="ja">こんにちは</i> (hello in Japanese).</p>
<p>The German word <i lang="de">Schadenfreude</i> has no direct English translation.</p>

Styling

Customize the appearance:

<style>
i {
  font-style: italic;
  color: #666;
}
i[lang] {
  color: #0066cc;
}
i[lang]:hover::after {
  content: ' [' attr(lang) ']';
  font-size: 0.8em;
}
</style>

<p>The word <i lang="fr">bonjour</i> means hello.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
i {
  font-style: italic;
  color: #666;
}
i[lang] {
  color: #0066cc;
}
i[lang]:hover::after {
  content: ' [' attr(lang) ']';
  font-size: 0.8em;
}
</style>

<p>The word <i lang="fr">bonjour</i> means hello.</p>

When NOT to Use ``

<p>This is <i>very important</i>.</p>

<p>This is <em>very important</em>.</p>

Don’t Use for Book/Work Titles

Wrong
Right

<p>I'm reading <i>To Kill a Mockingbird</i>.</p>

<p>I'm reading <cite>To Kill a Mockingbird</cite>.</p>

Don’t Use Just for Styling

Wrong
Right

<p><i>Welcome to our site</i></p>

<p class="welcome">Welcome to our site</p>

Icon Usage

The  element is commonly used for icon fonts (though this is not semantic):

<style>
/* Simulating icon font behavior */
.icon-star::before { content: '⭐ '; }
.icon-heart::before { content: '❤️ '; }
</style>

<p><i class="icon-star"></i>Favorite</p>
<p><i class="icon-heart"></i>Like</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
/* Simulating icon font behavior */
.icon-star::before { content: '⭐ '; }
.icon-heart::before { content: '❤️ '; }
</style>

<p><i class="icon-star"></i>Favorite</p>
<p><i class="icon-heart"></i>Like</p>

Real-World Examples

Blog Post

<article>
<p>The concept of <i>responsive design</i> revolutionized web development. As Ethan Marcotte coined the term, designers began thinking about fluid layouts.</p>
<p>He thought to himself, <i>This changes everything.</i></p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p>The concept of <i>responsive design</i> revolutionized web development. As Ethan Marcotte coined the term, designers began thinking about fluid layouts.</p>
<p>He thought to himself, <i>This changes everything.</i></p>
</article>

Scientific Writing

<p>Recent studies of <i>Escherichia coli</i> (E. coli) have revealed new insights into bacterial resistance.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Recent studies of <i>Escherichia coli</i> (E. coli) have revealed new insights into bacterial resistance.</p>

Product Description

<p>Our new <i>premium</i> tier includes advanced features. Think of it as the <i lang="fr">crème de la crème</i> of our offerings.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Our new <i>premium</i> tier includes advanced features. Think of it as the <i lang="fr">crème de la crème</i> of our offerings.</p>

Semantic Text Elements Comparison

Element	Use Case	Example
`<i>`	Alternate voice/mood	`<i>foreign word</i>`
`<em>`	Stress emphasis	`<em>really</em> important`
`<b>`	Keywords, no importance	`<b>Product name</b>`
`<strong>`	Strong importance	`<strong>Warning:</strong>`
`<cite>`	Titles of works	`<cite>Book Title</cite>`
`<dfn>`	Defining instance	`<dfn>term</dfn>`

Accessibility

Screen readers typically don’t announce  differently, but the visual distinction helps sighted users.

Use Language Attributes

Always specify language for foreign text:

<!-- Good: helps screen readers pronounce correctly -->
<i lang="fr">merci</i>

<!-- Poor: screen reader may mispronounce -->
<i>merci</i>

Icons Need Labels

If using  for icons, provide text alternatives:

<!-- With visible text -->
<button><i class="icon-save"></i> Save</button>

<!-- Icon only: add aria-label -->
<button aria-label="Save"><i class="icon-save"></i></button>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The  element has been supported since the earliest browsers.

For stress emphasis that changes meaning. Learn more →

For titles of creative works. Learn more →

For keywords without importance. Learn more →

Specifications
Section titled “Specifications”

WHATWG HTML Living Standard

MDN Web Docs

Previous
 - The Emphasis Element Next
<ins> - The Inserted Text Element

<i> - The Idiomatic Text Element

The `<i>` Element

Quick Example

Syntax

`<i>` vs `<em>`

Common Use Cases

Technical Terms

Foreign Language Phrases

Taxonomic Names

Ship Names

Thoughts and Internal Dialogue

Dream Sequences or Fantasy

Alternative Voice or Tone

Idiomatic Expressions

With Language Attribute

Styling

When NOT to Use `<i>`

Don’t Use for Emphasis

Don’t Use for Book/Work Titles

Don’t Use Just for Styling

Icon Usage

Real-World Examples

Blog Post

Scientific Writing

Product Description

Semantic Text Elements Comparison

Accessibility

Use Language Attributes

Icons Need Labels

Browser Support

Specifications

<i> - The Idiomatic Text Element

The <i> Element

Quick Example

Syntax

<i> vs <em>

Common Use Cases

Technical Terms

Foreign Language Phrases

Taxonomic Names

Ship Names

Thoughts and Internal Dialogue

Dream Sequences or Fantasy

Alternative Voice or Tone

Idiomatic Expressions

With Language Attribute

Styling

When NOT to Use <i>

Don’t Use for Emphasis

Don’t Use for Book/Work Titles

Don’t Use Just for Styling

Icon Usage

Real-World Examples

Blog Post

Scientific Writing

Product Description

Semantic Text Elements Comparison

Accessibility

Screen Reader Behavior

Use Language Attributes

Icons Need Labels

Browser Support

Related Elements

Specifications

The `<i>` Element

`<i>` vs `<em>`

When NOT to Use `<i>`