Learn How to use HTML em tag

HTML: em tag

In this series of learning HTML, we will teach you how to use HTML em tag with proper syntax and lots of examples. Let’s start on the HTML em tag.

Description of HTML em tag

The HTML  tag is used to indicate emphasized text, which is typically displayed in the italicized form. The  tag is commonly used to highlight a word or phrase that needs to be emphasized within a block of text.

Here is an example of how the  tag can be used:

<p>This sentence contains an <em>emphasized</em> word.</p>

In this example, the word “emphasized” is enclosed in the  tag, which indicates that it should be emphasized. The browser typically displays emphasized text in italics.

The  tag can be nested within other tags, such as the  tag, to emphasize specific portions of text within larger blocks of content.

The  tag should not be used simply to change the style of text, but rather to indicate semantic emphasis. In cases where italicized text is desired for purely stylistic reasons, the CSS font-style property should be used instead.

Overall, the  tag is a useful tool for indicating emphasis in HTML documents, and should be used to highlight important words or phrases within a block of text.

Syntax of HTML em tag

Here is an example of how the  tag can be used in HTML:

<p>This is an <em>important</em> message.</p>

<body>
<p><em>Stress emphasized text goes here</em> but not here</p>
</body>

Global Attributes

The  tag in HTML can accept all of the global attributes that are available to most HTML elements. These attributes can be used to modify the behavior and appearance of the element. Here are some of the most commonly used global attributes with the  tag:

class: Specifies one or more class names for the element, which can be used to apply CSS styles to the element.
id: Specifies a unique ID for the element, which can be used to identify the element in CSS or JavaScript code.
style: Specifies inline CSS styles for the element, which can be used to modify the appearance of the element.
title: Specifies extra information about the element, which is typically displayed as a tooltip when the user hovers over the element with their mouse.
dir: Specifies the direction of the text within the element, either left-to-right (default) or right-to-left.
lang: Specifies the language of the content within the element, using a two-letter language code.
xml:lang: Specifies the language of the content within the element in XML syntax, using a two-letter language code.
accesskey: Specifies a shortcut key to activate or focus the element.
tabindex: Specifies the order in which the element should be focused when the user presses the “Tab” key.
translate: Specifies whether the content of the element should be translated by a machine translation engine.

Here is an example of how some of these attributes can be used with the  tag:

<p>My <em class="important" id="emphasized" style="font-style: normal;" title="This is important!" lang="en">favorite</em> color is blue.</p>

In this example, the  tag is given a class of “important”, an ID of “emphasized”, inline styles to override the default italic styling and a title of “This is important!”. The language of the content within the element is set to English using the lang attribute. These attributes could be used to modify the behavior and appearance of the element in various ways.

Event Attributes

The  tag in HTML does not have any specific event attributes, as it is a semantic tag used for indicating emphasis rather than interacting with the user or the page. However, it can be used in conjunction with other HTML tags that do have event attributes, such as the <a> tag or the <button> tag, to create interactive elements on a web page.

For example, the following code snippet uses the  tag within an <a> tag to create a clickable link with emphasized text:

<a href="https://www.example.com" onclick="alert('You clicked the link!'); return true;">
Visit <em>Example</em> website
</a>

In this example, the <a> tag has an onclick attribute that triggers an alert message when the link is clicked, and the  tag is used to emphasize the word “Example” within the link text. This creates a clickable link with emphasized text that triggers an alert when clicked.

However, it’s important to note that using inline event attributes like onclick can make the code harder to maintain and debug, so it’s generally recommended to use event listeners and other methods of attaching event handlers instead.

Other Attributes

The tag in HTML is used to indicate an emphasis on a text. It can be used to italicize or emphasize the content of the tag, but the precise styling may vary depending on the CSS that is applied to the page.

The tag does not have any required attributes, but it can accept the following optional attributes:

class: Specifies one or more class names for the element. This can be used to apply CSS styles to the element.
id: Specifies a unique ID for the element. This can be used to identify the element in CSS or JavaScript code.
title: Specifies extra information about the element, which is typically displayed as a tooltip when the user hovers over the element with their mouse.

Here is an example of how the tag can be used with attributes:

<p>My <em class="important" id="emphasized" title="This is important!">favorite</em> color is blue.</p>

In this example, the word “favorite” is wrapped in an tag, which is given a class of “important”, an ID of “emphasized”, and a title of “This is important!”. This would allow CSS and JavaScript to target the element for specific styling or interaction.

Notes on HTML em tag

Here are some important notes on the  tag in HTML:

The  tag is used to indicate emphasis or importance of text content, and it is typically rendered as italicized text by default, although this can be changed using CSS.
The  tag should not be used simply to apply italic styling to text, but should be reserved for instances where emphasis or importance is intended.
The  tag does not convey any specific semantic meaning beyond indicating emphasis, so it should be used in conjunction with other HTML tags to provide more context and meaning to the content.
The  tag can be nested within other HTML tags to indicate nested emphasis, but it should not be overused, as excessive emphasis can detract from the overall readability and impact of the content.
The  tag is a semantic tag, which means it has meaning beyond its visual presentation. Search engines, screen readers, and other user agents use semantic tags to help understand the structure and meaning of web pages, so it’s important to use the  tag appropriately and consistently.

Browser Compatibility

The HTML em tag has essential support with the following browsers:

Chrome
Internet Explorer (IE)
Opera
Safari (WebKit)
Firefox (Gecko)
Android
Firefox Mobile (Gecko)
Edge Mobile
Opera Mobile
Safari Mobile

Examples of HTML em tag

We will discuss the tag below, exploring examples of how to use the tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5
HTML4
XHTML

We will discuss the HTML em tag below, with some examples of how to use the em tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

HTML5
HTML4
XHTML

What are the major differences between HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1 Document?

HTML5 Document

Here’s an example of an HTML5 document that uses the  tag to emphasize certain words:

<!DOCTYPE html>
<html>
<head>
<title>Example Document using <em>em</em> tag</title>
</head>
<body>
<h1>My favorite <em>fruits</em></h1>
<ul>
<li><em>Apples</em> - I love their crispness and tartness</li>
<li><em>Bananas</em> - A great source of potassium and energy</li>
<li><em>Oranges</em> - The perfect juicy snack</li>
</ul>
<p>I just can't get enough of these <em>fruits</em>!</p>
</body>
</html>

In this example, we have an HTML5 document that uses the  tag to emphasize the words “fruits”, “Apples”, “Bananas”, “Oranges”, and “fruits” again.

Inside the <head> tag, we have the document title “Example Document using em tag”. The word “em” is surrounded by the  tag to emphasize it.

Inside the <body> tag, we have a heading that uses the  tag to emphasize the word “fruits”. We also have an unordered list of fruits, where the name of each fruit is surrounded by the  tag to emphasize it. Finally, we have a paragraph that uses the  tag to emphasize the word “fruits” again.

When the HTML is rendered in a web browser, the words surrounded by the  tag will be displayed in italicized text, indicating that they are emphasized.

HTML 4.01 Transitional Document

Here’s an example of an HTML 4.01 Transitional document that uses the  tag to emphasize certain words:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Document using <em>em</em> tag</title>
</head>
<body>
<h1>My favorite <em>fruits</em></h1>
<ul>
<li><em>Apples</em> - I love their crispness and tartness</li>
<li><em>Bananas</em> - A great source of potassium and energy</li>
<li><em>Oranges</em> - The perfect juicy snack</li>
</ul>
<p>I just can't get enough of these <em>fruits</em>!</p>
</body>
</html>

In this example, we have an HTML 4.01 Transitional document that uses the  tag to emphasize the words “fruits”, “Apples”, “Bananas”, “Oranges”, and “fruits” again.

Inside the <head> tag, we have the document title “Example Document using em tag”. The word “em” is surrounded by the  tag to emphasize it.

When the HTML is rendered in a web browser, the words surrounded by the  tag will be displayed in italicized text, indicating that they are emphasized. However, it’s worth noting that HTML 4.01 Transitional is an older version of HTML and is not recommended for use in modern web development. It’s better to use the latest version of HTML, which is HTML5.

XHTML 1.0 Transitional Document

here’s an example of an XHTML 1.0 Transitional document that uses the  tag to emphasize certain words:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document using <em>em</em> tag</title>
</head>
<body>
<h1>My favorite <em>fruits</em></h1>
<ul>
<li><em>Apples</em> - I love their crispness and tartness</li>
<li><em>Bananas</em> - A great source of potassium and energy</li>
<li><em>Oranges</em> - The perfect juicy snack</li>
</ul>
<p>I just can't get enough of these <em>fruits</em>!</p>
</body>
</html>

In this example, we have an XHTML 1.0 Transitional document that uses the  tag to emphasize the words “fruits”, “Apples”, “Bananas”, “Oranges”, and “fruits” again.

Inside the <head> tag, we have the document title “Example Document using em tag”. The word “em” is surrounded by the  tag to emphasize it.

When the XHTML is rendered in a web browser, the words surrounded by the  tag will be displayed in italicized text, indicating that they are emphasized. It’s worth noting that XHTML is an XML-based version of HTML and requires strict adherence to syntax rules, such as proper nesting and closing of tags. In this example, we have properly closed all tags and used the correct syntax for XHTML.

XHTML 1.0 Strict Document

here’s an example of an XHTML 1.0 Strict document that uses the  tag to emphasize certain words:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document using <em>em</em> tag</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>My favorite <em>fruits</em></h1>
<ul>
<li><em>Apples</em> - I love their crispness and tartness</li>
<li><em>Bananas</em> - A great source of potassium and energy</li>
<li><em>Oranges</em> - The perfect juicy snack</li>
</ul>
<p>I just can't get enough of these <em>fruits</em>!</p>
</body>
</html>

In this example, we have an XHTML 1.0 Strict document that uses the  tag to emphasize the words “fruits”, “Apples”, “Bananas”, “Oranges”, and “fruits” again.

Inside the <head> tag, we have the document title “Example Document using em tag”, and a <meta> tag that specifies the character encoding of the document as UTF-8.

When the XHTML is rendered in a web browser, the words surrounded by the  tag will be displayed in italicized text, indicating that they are emphasized. It’s worth noting that XHTML 1.0 Strict is a stricter version of XHTML than the Transitional version, and it requires stricter adherence to syntax rules. In this example, we have properly closed all tags and used the correct syntax for XHTML 1.0 Strict.

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 document that uses the  tag to emphasize certain words:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document using <em>em</em> tag</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<h1>My favorite <em>fruits</em></h1>
<ul>
<li><em>Apples</em> - I love their crispness and tartness</li>
<li><em>Bananas</em> - A great source of potassium and energy</li>
<li><em>Oranges</em> - The perfect juicy snack</li>
</ul>
<p>I just can't get enough of these <em>fruits</em>!</p>
</body>
</html>

In this example, we have an XHTML 1.1 document that uses the  tag to emphasize the words “fruits”, “Apples”, “Bananas”, “Oranges”, and “fruits” again.

Inside the <head> tag, we have the document title “Example Document using em tag”, and a <meta> tag that specifies the character encoding of the document as UTF-8, and that the content type is application/xhtml+xml.

When the XHTML is rendered in a web browser, the words surrounded by the  tag will be displayed in italicized text, indicating that they are emphasized. It’s worth noting that XHTML 1.1 is a more modular and extensible version of XHTML than previous versions, and it requires even stricter adherence to syntax rules. In this example, we have properly closed all tags and used the correct syntax for XHTML 1.1.