The HTML <em> element is used to emphasize a particular word, phrase, or part of a sentence. Browsers usually display emphasized text in italic by default.

The <em> element is a semantic HTML element, which means it provides meaning to the content instead of simply changing its appearance.

What Is HTML Emphasis?

The <em> element tells the browser that the enclosed text should receive emphasis.

For example, <em>very important</em> indicates that the words “very important” are emphasized.

A simple example is:

<p>You should <em>carefully</em> read the instructions.</p>

The browser normally displays “carefully” in italic.

HTML Emphasis Syntax

The basic syntax is:

<em>Emphasized Text</em>

You can use <em> inside paragraphs, headings, lists, and other suitable HTML elements.

For example:

<p>This is <em>really important</em> information.</p>

Here, the phrase “really important” receives emphasis.

Why Use the <em> Element?

The main purpose of <em> is to communicate emphasis in the content.

For example:

<p>You <em>must</em> complete this form.</p>

The word “must” is emphasized because it changes the meaning or importance of the sentence.

This is different from simply making text italic with CSS.

HTML Emphasis vs Italic

HTML provides both <em> and <i>, but they have different purposes.

Element	Purpose	Default Appearance
<em>	Indicates emphasis	Italic
<i>	Represents text set apart from normal content	Italic

For example:

<p>You should <em>always</em> save your work.</p>

The <em> element indicates that “always” is emphasized.

The <i> element can be used when text is set apart without specifically indicating emphasis.

For example:

<p>The term <i>HTML</i> stands for HyperText Markup Language.</p>

Using Emphasis with CSS

You can use CSS to customize the appearance of emphasized text.

<style>
  em {
    color: blue;
    font-weight: bold;
  }
</style>

<p>You should <em>carefully</em> check your HTML code.</p>

Here, the HTML provides the meaning, while CSS controls the visual appearance.

You can also use a class when you want to style specific <em> elements.

For example:

<p><em class=”highlight”>Important</em> information is shown here.</p>

.highlight {
  color: blue;
}

Using Emphasis in Lists

The <em> element can be used inside list items to emphasize particular words.

<ul>
  <li>Learn <em>HTML</em> first.</li>
  <li>Practice <em>CSS</em> regularly.</li>
  <li>Then learn <em>JavaScript</em>.</li>
</ul>

This can be useful when you want to draw attention to specific terms.

Using Multiple <em> Elements

You can use multiple <em> elements within the same paragraph.

For example:

<p>Learn <em>HTML</em>, <em>CSS</em>, and <em>JavaScript</em>.</p>

Each emphasized word is marked separately.

Nested Emphasis

The <em> element can be nested when different levels of emphasis are appropriate.

For example:

<p>This is <em>really <em>very</em> important</em>.</p>

Nested emphasis should be used carefully. In most normal content, simple and clear markup is easier to understand and maintain.

Emphasis and Accessibility

Semantic HTML helps communicate the meaning and structure of content.

When you use <em>, you are indicating that the text should be emphasized. This is different from simply applying font-style: italic with CSS.

For example:

<p>You <em>must</em> complete the registration.</p>

The <em> element communicates emphasis as part of the content, while CSS only changes how the content looks.

<em> vs CSS Italic

You can make text italic using CSS:

<p class="italic-text">This text is italic.</p>

<style>
  .italic-text {
    font-style: italic;
  }
</style>

CSS controls the visual appearance but does not add the semantic meaning of emphasis.

If the text needs actual emphasis, <em> is usually the better choice.

Best Practices for HTML Emphasis

Best Practice	Recommendation
Use semantic HTML	Use <em> when the content needs emphasis
Avoid overuse	Emphasize only relevant words or phrases
Use CSS for appearance	Use CSS when you only need italic styling
Use <i> appropriately	Use <i> for text set apart without emphasis
Keep content meaningful	Make sure the emphasized text has a reason to stand out

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>HTML Emphasis Example</title>

  <style>
    .highlight {
      color: blue;
    }
  </style>
</head>

<body>

  <h1>HTML Emphasis</h1>

  <p>
    You should
    <em class="highlight">carefully</em>
    read the instructions.
  </p>

  <p>
    You <em>must</em> complete all required fields.
  </p>

</body>
</html>

In this example, <em> communicates emphasis, while CSS changes the color of the emphasized text.