0
0
HTMLmarkup~5 mins

Em vs i tag in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The tag shows emphasis, meaning the text is important. The tag shows text in italics, often for style or a different voice.

When you want to stress a word to show it matters in a sentence.
When you want to show a word is a title, foreign phrase, or technical term in italics.
When you want to help screen readers understand which words are emphasized.
When you want to style text differently without implying importance.
When you want to keep your HTML meaningful and accessible.
Syntax
HTML
<em>text</em>
<i>text</i>

The tag adds emphasis and changes how screen readers speak the text.

The tag only changes the style to italic without adding emphasis.

Examples
The word "very" is emphasized, so screen readers will stress it.
HTML
<p>This is <em>very</em> important.</p>
The word "just" is italic but not emphasized for meaning.
HTML
<p>This is <i>just</i> styled differently.</p>
Using <em> to emphasize the book title.
HTML
<p>The book is titled <em>War and Peace</em>.</p>
Using <i> for a foreign word in italics.
HTML
<p>The word <i>bonjour</i> means hello in French.</p>
Sample Program

This page shows the difference between and tags. The text is important and read with emphasis by screen readers. The text is just italic style without extra meaning.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Em vs i Tag Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p>This is a <em>very important</em> message.</p>
  <p>This word is <i>italicized</i> for style only.</p>
  <p>Here is a foreign word: <i>fiancé</i>.</p>
  <p>Notice the <em>emphasis</em> on key points.</p>
</body>
</html>
OutputSuccess
Important Notes

Use when the meaning or importance of the text matters.

Use when you want italic style without changing meaning.

Screen readers treat and differently for accessibility.

Summary

<em> means emphasis and changes meaning and speech.

<i> means italic style only, no added meaning.

Choose tags to keep your content clear and accessible.