Learn how to use the <i> element for stylistic italics and distinguish it from semantic emphasis using <em>.
What it is
The <i> element represents a span of text that is set off from the normal prose without conveying any extra importance. It is used for alternate voice or mood, such as technical terms, foreign language phrases, ship names, or thoughts. While browsers typically render this text in italics, the visual style is not the primary purpose; the semantic meaning is.
In contrast, the <em> element indicates stress emphasis. The content inside <em> should be read with vocal stress, changing the meaning of the sentence. Use <i> when you want italic styling but no change in reading tone or importance.
Why it matters
- Semantic Clarity: Screen readers may announce
<em>differently than<i>, ensuring users understand which words are emphasized versus which are merely styled. - Correct Usage: Using
<i>for non-emphasis cases (like scientific names) prevents misleading assistive technologies. - CSS Independence: You can style
<i>elements via CSS without affecting other italicized text, allowing for precise design control. - Accessibility: Proper distinction between emphasis and style helps maintain an accurate mental model for users relying on audio output.
Syntax or steps
To use the <i> element, wrap the specific text segment within opening and closing tags. Ensure the content is inline and does not contain block-level elements.
- Identify text that requires italic styling but not vocal emphasis (e.g., a Latin phrase).
- Wrap the text in
<i>tags. - Verify that the surrounding sentence structure remains unchanged in meaning.
Example
<p>The term <i>Homo sapiens</i> refers to modern humans.</p>
<p>Please note: <em>do not</em> touch the wire.</p>Explanation: In the first paragraph, Homo sapiens is a scientific name. It is conventionally italicized, but it is not being shouted or stressed vocally. Therefore, <i> is correct. In the second paragraph, "do not" carries critical warning weight. A screen reader might pause or raise pitch here, so <em> is appropriate to convey urgency.
Common mistakes
- Using
<i>for emphasis: If you mean to stress a word, use<em>. Using<i>hides the intent from assistive tech. - Using
<em>for mere styling: Do not use<em>just because you want italics for a book title or foreign word. This falsely implies vocal stress. - Nesting incorrectly: Avoid nesting
<i>inside<em>unless there is a distinct reason for both alternate voice and emphasis simultaneously, which is rare. - Relying solely on visuals: Remember that CSS can override default styles. Always choose the tag based on semantics, not just how it looks by default.
When to use it
| Scenario | Recommended Element | Reason |
|---|---|---|
| Foreign language phrase | <i> |
Stylistic convention, no vocal stress needed. |
| Scientific name | <i> |
Standard formatting, not emphasized. |
| Warning or strong point | <em> |
Requires vocal stress for clarity. |
| Thoughts or internal monologue | <i> |
Alternate voice/tone, not necessarily loud. |
Practice
Guided Exercise: Write a sentence mentioning the ship name Titanic and then emphasize the word sank to show tragedy. Wrap the ship name in <i> and the verb in <em>.
Challenge: Identify if the following needs <i> or <em>: "The concept of zeitgeist is hard to translate." Hint: Is "zeitgeist" being stressed vocally, or is it just a foreign term?
Quick check
Question: Should you use <i> or <em> for a book title? Why?
Answer: Use <i>. Book titles are traditionally italicized for style, but they do not require vocal emphasis in a sentence.
Summary
The <i> element provides semantic meaning for alternate voices or stylistic italics without implying importance. Choose <i> for conventions like foreign words or titles, and reserve <em> for actual vocal stress to ensure accessibility and correct interpretation.