Questions
4 of 7
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
When should you use <em> instead of <i>?
Difficulty: 2/10
semantic HTML, accessibility, styling
Both <em> and <i> tags render text in italics by default, but they serve different purposes. The <i> tag is used for stylistic text (like foreign words, technical terms, or thoughts), while the <em> tag is semantic and indicates emphasis. Screen readers and assistive technologies recognize <em> as emphasized text and give it vocal stress.
Example Using <i> and <em>
Key Differences
- 1
<i> makes text italic without implying importance (visual only).
- 2
<em> makes text italic and adds semantic emphasis.
- 3
Screen readers announce <em> with stress, improving accessibility.
- 4
Use <i> for foreign words, idioms, or technical terms.
- 5
Use <em> when you want to highlight importance or emphasis.
Example with CSS Alternative
Scenario Questions
0-2 years experience
- 1You need to make a single word in a paragraph stand out visually, but also want screen readers to convey emphasis. Which tag would you choose and why?
- 2If you see an <i> tag used for a term that should be emphasized, what would you do to correct it?
- 3What impact does using <i> instead of <em> have on SEO and accessibility?
2-5 years experience
- 1Our comment component currently uses <i> for quoted text, and the design team now wants the quotes to be emphasized for accessibility. How would you refactor the markup?
- 2During a UI regression test a bolded word lost its styling after a CSS reset because it was wrapped in <i>. Explain why this happened and how switching to <em> could help.
- 3A third‑party widget outputs <i> for emphasized text, but our style guide requires <em>. How would you handle this inconsistency without breaking the widget?
5-8 years experience
- 1You are leading a migration of a large legacy documentation site that heavily uses <i> for emphasis. What strategy would you use to replace them with <em> while ensuring minimal downtime and preserving SEO?
- 2In a high‑traffic news site we need assistive technologies to correctly interpret emphasized text. Discuss the trade‑offs of using <em> versus <i> when a CSS framework resets default styles.
- 3Your team is building an accessible component library. How would you enforce the use of <em> over <i> at the component API level, and what linting or testing measures would you put in place?
8+ years experience
- 1Our organization is consolidating multiple front‑end codebases into a shared design system. Some teams have legacy code where <i> is used for both icons and emphasis. How would you design a migration plan that addresses semantic correctness, icon usage, and long‑term maintainability across teams?
- 2When evaluating the long‑term impact of semantic HTML on SEO, accessibility, and internationalization, how would you argue for a policy that bans <i> for emphasis across all products, and what governance processes would you implement to enforce it?
Follow-up Questions
- How would you verify that the change improves accessibility?
- What edge cases might cause <em> to behave unexpectedly?
- How would you communicate this markup guideline to other developers?