The i tag is used to italicize text and is often used to indicate text in an alternate voice or mood, such as:
- Technical terms
- Foreign words
- Thoughts or inner dialogue
- Icons or screen reader hints
✅ Note:
<i>means italic in appearance, but its semantic meaning is context-specific.
✅ Basic Syntax
<p>This is an <i>important</i> word.</p>
📍 Result: The word “important” will appear in italic.
📌 Use Cases
| Use case | Example |
|---|---|
| Emphasizing terms | <i>et cetera</i> for Latin phrases |
| Book titles | <i>War and Peace</i> |
| Technical text | <i>function()</i> returns a value |
| Icon fonts | <i class="fa fa-star"></i> |
🎨 Styling Tip (CSS Alternative)
Although <i> is used for italics, semantic alternatives like <em> (emphasis) are better for accessibility. You can style any text as italic using CSS:
<span style="font-style: italic;">Custom Italics</span>
⚠️ <i> vs <em>
| Tag | Meaning | Styling | Best For |
|---|---|---|---|
<i> | Alternate voice/mood | Italic text | Technical terms, icons, foreign words |
<em> | Emphasis (semantic) | Italic text | Emphasizing words in speech |
✅ Summary
| Feature | <i> Tag |
|---|---|
| Purpose | Displays italic text |
| Semantic Role | Alternate tone or voice |
| Visible Effect | Italicizes enclosed text |
| Alternatives | <em> for semantic emphasis |