HTML <i> Tag

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 3 Examples
Text & Semantics
HTML i tag tutorial — italic text and alternate voice in prose
Overview

What You’ll Learn

By the end of this tutorial, you’ll use the <i> element correctly for italic text, alternate voice, and stylistic shifts in tone.

In HTML, the <i> tag represents text in an alternate voice or mood — often shown in italics. This guide covers syntax, common patterns, comparisons with em, accessibility, and best practices for beginners and web developers alike.

01

Core Syntax

Wrap alternate-voice text in valid <i> opening and closing tags.

02

Alternate Voice

Understand when italics carry mood or context, not stress emphasis.

03

i vs em

Choose the right inline element for stylistic italics vs semantic stress.

04

Common Use Cases

Foreign phrases, technical terms, taxonomic names, and tone shifts.

05

CSS Styling

Customize italic appearance with classes and stylesheets.

06

Accessibility

Know when i is appropriate and when em is required.

Fundamentals

What Is the <i> Tag?

The italic element (<i>) represents text in an alternate voice or mood. Browsers typically render it in italics, although the exact appearance may vary based on browser styles and your CSS.

💡
Not the same as emphasis

Use <i> for alternate voice, foreign words, or technical terms. Use <em> when stressing a word changes the meaning of the sentence.

The element is inline, so it flows naturally inside paragraphs, list items, and headings. In HTML5, i was redefined with semantic meaning — it is not purely presentational anymore.

Typical Use Cases

  • Foreign phrases — c'est la vie, etc.
  • Technical or taxonomic terms — Homo sapiens, max-width
  • Ship or product names — aboard the Endeavour
  • Alternate tone — He was quite surprised by the news.
Foundation

📝 Syntax

Wrap the text you want in alternate voice between opening and closing <i> tags:

syntax.html
<i>Your Italicized Text Here</i>

Syntax Rules

  • <i> is an inline element — it nests inside paragraphs and other phrasing content.
  • Self-closing syntax (<i />) is not valid in HTML.
  • Pair with lang when the italicized text is in a different language.
  • Use global attributes like class and style for custom styling.
Cheat Sheet

⚡ Quick Reference

Use CaseCode SnippetResult
Basic italic<i>alternate voice</i>alternate voice
Foreign phrase<i lang="fr">c'est la vie</i>c'est la vie
Technical term<i>Homo sapiens</i>Homo sapiens
Stress emphasis<em>must</em>must Use em, not i
Styled italic<i class="highlight">term</i>term
Tag-specific attrsNoneGlobal attributes only
Comparison

⚖️ <i> vs <em>

Both may appear italic, but they communicate different meaning:

ElementMeaningBest for
<i>Alternate voice or moodForeign phrases, technical terms, stylistic tone shifts
<em>Stress emphasisWords that change sentence meaning when stressed
AppearanceBoth often italicDefault browser styles can look similar
AccessibilityDifferent rolesem adds vocal stress; i does not imply urgency
i-vs-em.html
<p>She said <i lang="fr">c'est la vie</i>.</p>
<p>You <em>must</em> save your work before closing.</p>
Comparison

⚖️ <i> vs CSS font-style

Choose HTML semantics or CSS depending on whether italics carry meaning:

ApproachWhen to useExample
<i>Alternate voice, foreign words, technical terms<i lang="la">etc.</i>
CSS classPurely decorative italics with no semantic role<span class="italic">...</span>
<em>Stress emphasis that affects meaning<em>never</em>
ConsistencyDesign systemsDefine reusable CSS classes for repeated italic patterns
Reference

🧰 Attributes

The <i> tag has no tag-specific attributes. Combine it with global attributes for styling and language:

class Global

CSS hook for custom italic styling beyond default browser italics.

class="highlight"
style Global

Inline CSS for one-off color, weight, or style changes.

style="color: #7c2d12;"
lang Global

Language of italicized text when it differs from the document.

lang="fr"
id Global

Unique identifier for linking or scripting the italic span.

id="latin-term"
attributes.html
<p>This is a <i class="highlight">highlighted</i> example.</p>

Prefer CSS classes over inline styles for reusable design systems — but keep i for alternate voice, not general emphasis.

Hands-On

Examples Gallery

Styled italics, foreign phrases, and alternate voice patterns with copy-ready code and live previews.

Live Preview

Foreign phrase in alternate voice (browser default italic):

When the plan failed, she shrugged and said c'est la vie.

Styled Italic Text

Combine class with CSS for custom italic styling on an i element.

styled-italic.html
<p>This is a <i class="highlight">highlighted</i> example.</p>
Try It Yourself

Foreign Phrase

Use <i> with lang for words or phrases from another language.

foreign-phrase.html
<p>When the plan failed, she shrugged and said <i lang="fr">c'est la vie</i>.</p>
Try It Yourself

Alternate Voice

Use <i> for a shift in tone or mood within a sentence — not for stress emphasis.

alternate-voice.html
<p>He was <i>quite</i> surprised by the unexpected turn of events.</p>
Try It Yourself
Design

Styling <i> with CSS

Browsers italicize i by default. Customize appearance with CSS while preserving alternate-voice semantics when needed:

font-style Default italic
color Accent on technical terms
font-weight Bold + italic combo
font-style: normal Voice shift without slant
i-styles.css
/* Default italic styling */
i {
  font-style: italic;
}

i.highlight {
  font-style: italic;
  font-weight: 600;
  color: #7c2d12;
}

i.latin {
  font-style: italic;
  letter-spacing: 0.02em;
}

Live styled italic

The species Homo sapiens appeared in the fossil record.

A11y

♿ Accessibility

Use the right element so assistive technologies convey the correct meaning:

  • Use em for stress — when emphasis changes meaning, choose em, not i.
  • Use i for alternate voice — foreign phrases, technical terms, and tone shifts belong here.
  • Add lang when needed — help screen readers pronounce foreign words correctly with lang.
  • Don’t rely on italics alone — color, weight, or context should support meaning for all users.

🧠 How <i> Works

1

Author marks alternate voice

Wrap foreign words, technical terms, or tone shifts in i.

Markup
2

Browser applies default italic

User-agent styles visually distinguish alternate-voice text from surrounding prose.

Rendering
3

Assistive tech reads context

Screen readers treat i as alternate voice, not stress emphasis like em.

Accessibility
=

Clear alternate voice

Readers and assistive tech understand which text carries a different tone or context.

Compatibility

Universal Browser Support

The <i> element is fully supported in all browsers, including legacy Internet Explorer.

✓ Baseline · Since HTML 4

Italic text that works everywhere

From legacy Internet Explorer to the latest mobile browsers — the i element is fully supported for inline alternate-voice text.

100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
<i> tag 100% supported

Bottom line: Ship alternate-voice italics with confidence. The <i> element is safe to use in every production environment today.

Wrap Up

Conclusion

Mastering the <i> tag helps you mark text in an alternate voice or mood — foreign phrases, technical terms, and stylistic tone shifts. Use it thoughtfully alongside em for stress emphasis.

Remember the difference between i, em, and CSS-only italics, add lang for foreign words, and avoid using i when semantic emphasis is required.

View Examples Gallery Try foreign phrase example
Pro Tips

💡 Best Practices

✅ Do

  • Use i for alternate voice, foreign words, and technical terms
  • Use em when stress emphasis changes meaning
  • Add lang for non-English italicized text
  • Apply consistent CSS classes for styled italics

❌ Don’t

  • Use i for general emphasis — that belongs in em
  • Wrap entire paragraphs in i for decoration
  • Assume all italics need an i tag
  • Confuse i with b or strong
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <i>

Bookmark these before you ship — they’ll keep your italics semantic and accessible.

6
Core concepts
💬 01

Alternate Voice

<i> marks text in a different tone or mood.

Foundation
📝 02

Default Italic

Browsers render i in italics by default.

Rendering
⚖️ 03

Not the Same as em

em = stress emphasis; i = alternate voice.

Comparison
🌐 04

Use lang for Foreign Text

Help screen readers pronounce non-English words correctly.

Accessibility
🎨 05

CSS When Decorative

Purely visual italics can use CSS classes instead.

Pattern
✓ 06

Universal Support

Works in every browser, including legacy IE.

Compatibility
🎯 You’re ready to write alternate-voice italics
Review Quick Reference →

❓ Frequently Asked Questions

It marks text in an alternate voice or mood — foreign phrases, technical terms, taxonomic names, or tone shifts. It does not mark stress emphasis; use em for that.
em carries semantic stress emphasis. i represents alternate voice or mood, often for stylistic italics without semantic stress.
Yes. Browsers apply italic styling by default. You can override appearance with CSS while keeping alternate-voice semantics when appropriate.
Use i when italics carry meaning. Use CSS font-style: italic on a span or class when italics are purely decorative.
Yes. i was redefined in HTML5 with semantic meaning. It is not deprecated, but it should not replace em for stress emphasis.

Practice Alternate-Voice Italics

Try foreign phrases, styled italics, and tone shifts in the interactive HTML editor.

Try foreign phrase example →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML html Tag HTML iframe Tag