The <em> tag is used to emphasize text semantically. It typically renders as italic, but more importantly, it conveys emphasis meaning to screen readers and search engines.

Semantic Emphasis

Unlike <i>, which is for visual italic styling only, the <em> tag provides semantic meaning. Screen readers will emphasize <em> text when reading it aloud, making it accessible and meaningful.

When to Use <em>

Use <em> for:

• Emphasizing words or phrases that need semantic stress
• Highlighting important points that should be emphasized when read aloud
• Marking text that changes the meaning when emphasized
• Cases where the emphasis is part of the content's meaning

<em> vs <i>

Use <em> when: The text needs semantic emphasis. Screen readers will emphasize it when reading, and search engines understand it as emphasized content.

Use <i> when: You just want visual italic styling without semantic meaning (like foreign words, technical terms, or thoughts). The text doesn't need emphasis when read aloud.

Best Practices

Use <em> when the emphasis is part of the content's meaning. For most visual styling, CSS is preferred. However, <em> is essential for accessibility, as screen readers will emphasize the text appropriately. Avoid overusing emphasis, as it can reduce its impact.