07. i and em Tags
Introduction
Section titled “Introduction”The <i> and <em> tags both create italic text, but serve different purposes. Understanding their semantic differences helps create accessible HTML that properly conveys meaning to users and assistive technologies.
The i Tag
Section titled “The i Tag”The <i> tag is a presentational element that makes text italic without semantic meaning.
<p>This is <i>italic text</i> using the i tag.</p>When to Use i
Section titled “When to Use i”Use <i> for:
- Technical terms
- Foreign words
- Thoughts or asides
- Ship names
- Titles of works
<p>The term <i>de facto</i> means "in fact".</p><p>The ship <i>Titanic</i> sank in 1912.</p>The em Tag
Section titled “The em Tag”The <em> tag indicates emphasized content and renders as italic.
<p>This is <em>emphasized text</em> using the em tag.</p>When to Use em
Section titled “When to Use em”Use <em> for:
- Emphasizing words or phrases
- Adding stress to content
- Indicating importance through emphasis
<p>I <em>really</em> need to finish this project.</p>Key Differences
Section titled “Key Differences”Semantic Meaning
Section titled “Semantic Meaning”<i>: No semantic meaning, purely presentational<em>: Indicates emphasis, semantic meaning
Accessibility
Section titled “Accessibility”<i>: Screen readers don’t emphasize it<em>: Screen readers emphasize it with stress
Default Styling
Section titled “Default Styling”Both render as italic, but serve different purposes.
Best Practices
Section titled “Best Practices”Prefer em for Emphasis
Section titled “Prefer em for Emphasis”<!-- Good: Semantic emphasis --><p>I <em>really</em> enjoyed the movie.</p>
<!-- Avoid: Using i for emphasis --><p>I <i>really</i> enjoyed the movie.</p>Use i for Styling Only
Section titled “Use i for Styling Only”<!-- Good: Styling without emphasis --><p>The word <i>café</i> comes from French.</p>