<em> Tag in HTML

Syntax

The syntax of the em tag is pretty straightforward. Just write the opening and closing tags with some content in between.

<em> Tag Attributes

• The em doesn't have any tag-specific attributes. Let's understand with an example that we have the width for the <img/> tag, href for the <a> tag, and type for the <input/> tag. In the <em> tag, there is no special associated attribute.
• It supports all global attributes, for example:$-$ id, hidden, style, etc.
• It also supports all event attributes, for example:$-$, onload, onclick, onblur, etc.

How to Use <em> Tag in HTML?

The semantic meaning of the em tag is to emphasize the underlying content with verbal stress. What does that mean? Let's understand with some examples,

1. This example has an emphasis on what, which means if we speak it, we will put an exclamatory pause as well as a little bit more focus on the "what" keyword.

2. This example shows emphasis on now.

Even though the em tag visually represents only some content with simple styles, a software or screen reader interprets it in a way by emphasizing the same.

3. A few keywords are the focus of this example. Let's say a screen reader describes the information of the laptop, so if it encounters an em tag, it will emphasize the underlying content so that those special terms can get enhanced attention.

The inference is if you want to emphasize a specific part of the content, you can use the em tag. Italic font style is the default visual emphasis for the em tag.

<em> Tag Examples

Example 1: <em> Tag in HTML

Output:

Example 2: Visual Style Overriding

The default visual style of the em tag is "font-style". We can override it according to our requirements.

Output:

Example 3: Nested <em> Tag

We can also nest the em tag. One thing to note is that as the nesting levels increases, so will the level of emphasis.

Output:

Mark Up Emphasized Text in a Document

HTML contains several semantic tags which have their own meaning and can be identified by the developer as well as any software algorithm. They indicate what type of content they contain and what is the role of that content on the web page. Example$-$ footer tag describes that the content which is inside it will represent a footer on screen, form tag describes that the underlying content is a form to take data from the user, etc.

On the other hand, there exist several normal tags which usually don't have any meaning, and they neither give any indication of what they contain nor can anyone predict what could be the content inside them. Example$-$ With the div tag, we cannot predict what is underlying content. There could be anything, span is used to cover some content in a box, but there is no fixed rule for what it can contain, etc.

When a semantic tag is used to mark up emphasized content in HTML documents, the intention is to inform the program that this particular content is not normal and should be interpreted as such by creating some stress emphasis. In HTML documents, emphasized text is marked up with the <em> semantic tag.

Example: We will emphasize the bold keywords of this paragraph with markup in HTML.

"David follows his principle and ideology," Robin said; What? David follows his principal's ideology", Raman asked; "No, David follows his principle and ideology", Robin replied.

Browser support

Almost every browser with the latest version supports this tag.

• Chrome
• Edge
• Firefox
• Internet Explorer
• Opera
• Safari
• WebView Android
• Chrome Android
• Firefox for Android
• Opera Android
• Safari on iOS