Master HTML From Scratch

Clear, interactive, and structured HTML lessons designed for beginners.

Italic and Emphasis

Learn the difference between the <i> and <em> elements and understand when to use each one.

Introduction

HTML provides the <i> and <em> elements for text that is commonly displayed in an italic style.

Although both can appear visually similar, they communicate different meanings.

Remember: <i> is used for text in an alternate voice or mood, while <em> indicates emphasis.

The <i> Element

The <i> element represents text in an alternate voice or mood, such as a technical term, foreign word, phrase, or other text that is conventionally displayed in italic style.

Syntax 

<i>Text</i>

Example 

<p>
    This is an <i>italic word</i>.
</p>

Output

This is an italic word.

Common Uses of <i>

Technical Term 
<p>
    The term <i>frontend</i>
    is commonly used in web development.
</p>
Foreign Word 
<p>
    The word <i>bonjour</i>
    is French.
</p>
Phrase 
<p>
    The phrase <i>carpe diem</i>
    is widely known.
</p>
Alternate Voice 
<p>
    The word <i>HTML</i>
    appears in italic style.
</p>

The <em> Element

The <em> element indicates emphasis. The exact meaning of the sentence can change when a different word is emphasized.

Syntax 

<em>Important Word</em>

Example 

<p>
    You <em>must</em> practice HTML.
</p>

Output

You must practice HTML.

How Emphasis Can Change Meaning

The position of emphasis in a sentence can affect which word receives the strongest focus.

You must practice HTML.

You must practice HTML.

You must practice HTML.

The emphasized word receives additional stress or focus within the sentence.

<i> vs <em>

Feature <i> <em>
Main Purpose Represents an alternate voice or mood. Adds emphasis to content.
Semantic Meaning Represents a special type or alternate voice. Indicates emphasis.
Common Browser Appearance Italic text. Italic text.
Typical Usage Terms, phrases, foreign words, alternate voice. Words that need emphasis in a sentence.

Visual Comparison

Using <i>: This is italic text.

Using <em>: This text is emphasized.

Both may look similar visually, but the semantic meaning of the elements is different.

Combining <i> with Other Elements 

<p>
    Learn
    <strong>
        <i>HTML</i>
    </strong>
    step-by-step.
</p>

Learn HTML step-by-step.

Combining <em> with Other Elements 

<p>
    You
    <strong>
        <em>must</em>
    </strong>
    practice regularly.
</p>

You must practice regularly.

Using CSS for Visual Italic Style

CSS can make text visually italic without changing its HTML semantics. 

<p class="italic-text">
    HTML Course
</p>

<style>

    .italic-text {
        font-style: italic;
    }

</style>

HTML Course

Use CSS when italic appearance is purely a visual design requirement.

Accessibility and Semantics

Semantic HTML helps browsers and assistive technologies understand why certain text has special meaning.

<i>

Use for text that represents an alternate voice, mood, term, phrase, or similar distinction.

<em>

Use when the text should receive emphasis within the sentence.

Real-World Example 

<h2>
    HTML Course
</h2>

<p>
    The term <i>frontend</i>
    is commonly used in web development.
</p>

<p>
    You <em>must</em>
    practice HTML regularly.
</p>

HTML Course

The term frontend is commonly used in web development.

You must practice HTML regularly.

Common Mistakes

  • Using <em> only because the result looks italic.
  • Using <i> when the content actually needs emphasis.
  • Using HTML only for visual styling when CSS is sufficient.
  • Adding unnecessary nested formatting elements.

Practice Exercise

  1. Write a technical term using <i>.
  2. Write a foreign word using <i>.
  3. Emphasize an important word using <em>.
  4. Create a sentence where changing the emphasized word changes the focus.
  5. Compare <i> and <em> in the browser.

Summary

The <i> element represents text in an alternate voice, mood, term, or phrase, while the <em> element communicates emphasis. Both are commonly rendered in italic style, but their semantic purposes are different.

← Previous: Bold and Strong Next: Underline and Highlight →