The em Tag in HTML: How to Emphasize Text in HTML

The HTML em tag shows stress or emphasis in text. It changes meaning for readers and screen readers.

What is the <em> Tag in HTML?

The <em> tag shows stress in content in HTML. It tells the browser to stress that part of the sentence.

The syntax looks like this:

<em>stressed text</em>

This tag changes how readers understand the sentence. It gives voice stress to the words inside it. Screen readers often use a different tone.

The tag changes tone. It tells which part to stress. That can change meaning.

You can nest one tag inside another. You can also use it many times in one paragraph. Each tag adds another level of stress.

You can style elements with CSS. The browser shows them in italics by default. You can change font, size, color, or other styles.

em {
  font-style: normal;
  color: red;
}

Valid Elements Inside <em> Tag in HTML

You can use only phrasing elements inside .

These work:

<em><a href="#">link</a></em>
<em><span>text</span></em>
<em><b>bold</b></em>

These do not work:

<em><div>block</div></em> <!-- invalid -->
<em><h1>heading</h1></em> <!-- invalid -->

Do not place block elements inside. That breaks HTML rules.

Examples

Basic Emphasis

<pre><code><p>I <em>need</em> this done today.</p></code></pre>

This shows that the word “need” is stressed.

Nested Emphasis

<pre><code><p>This is <em>very <em>urgent</em></em>.</p></code></pre>

This adds two levels of emphasis to the word “urgent”.

Styled Emphasis

<pre><code><style>
em {
  font-style: normal;
  color: blue;
}
</style>
<p>Read the <em>instructions</em> carefully.</p></code></pre>

This removes italics and changes the text color to blue.

Wrapping Up

In this article you learned what the HTML tag does and how it affects meaning. You also saw how to use it with other tags and CSS.

Here is a quick recap:

• Use to stress words in a sentence.
• Only use phrasing tags inside it.
• Do not use block tags inside it.
• Style it with CSS for control.

FAQs

<style>
em {
  color: green;
  font-style: normal;
}
</style>

Similar Reads