W3docs

HTML <em> Tag

The <em> tag logically and visually defines the important part of the text. Description of the tag, attributes and examples of using.

The <em> tag specifies a text that has stress emphasis. Browsers display the text within this tag in italic.

The <em> tag is an element of logical markup. In contrast, the <i> tag also displays text in italic but serves a different semantic purpose: it represents text in an alternate voice or mood, such as technical terms or foreign phrases.

Tip

The <em> tag is not deprecated, but it is possible to achieve richer effects with CSS font-style property.

The <em> tag is considered to be a phrase tag, which points out that a section of the text has a structural meaning.

Syntax

The <em> tag comes in pairs. The content is written between the opening (<em>) and closing (</em>) tags.

Example of the HTML <em> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>It is a normal paragraph</p>
    <p>The important part of the text is <em>shown in italic</em>.</p>
  </body>
</html>

Result

em tag example

The difference between the <em> and the <i> tags

The <em> and <i> tags are often confused because both italicize text by default. However, their semantic meanings differ. The <em> tag indicates stress emphasis, while the <i> tag represents text in an alternate voice or mood, such as technical terms, foreign phrases, or taxonomic designations.

Attributes

The <em> tag supports the Global Attributes and the Event Attributes.

How to style an HTML <em> Tag

<style>
  em {
    font-style: italic;
    color: #333;
  }
</style>
<p>This is <em>important</em> text.</p>

Practice

Practice

What is the function of the HTML <em> tag?