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 <em> tag is used to indicate emphasized text, which is typically displayed in the italicized form. The <em> 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 <em> tag can be used:
<p>This sentence contains an <em>emphasized</em> word.</p>In this example, the word “emphasized” is enclosed in the <em> tag, which indicates that it should be emphasized. The browser typically displays emphasized text in italics.
The <em> tag can be nested within other tags, such as the <p> tag, to emphasize specific portions of text within larger blocks of content.
The <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> 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 <em> tag in HTML:
- The
<em>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
<em>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
<em>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
<em>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
<em>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<em>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 <em> tag below, exploring examples of how to use the <em> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
HTML 4.01 Transitional Document
Here’s an example of an HTML 4.01 Transitional document that uses the <em> 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 <em> 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>em</em> tag”. The word “em” is surrounded by the <em> tag to emphasize it.
Inside the <body> tag, we have a heading that uses the <em> tag to emphasize the word “fruits”. We also have an unordered list of fruits, where the name of each fruit is surrounded by the <em> tag to emphasize it. Finally, we have a paragraph that uses the <em> tag to emphasize the word “fruits” again.
When the HTML is rendered in a web browser, the words surrounded by the <em> 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 <em> 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 <em> 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>em</em> tag”. The word “em” is surrounded by the <em> tag to emphasize it.
Inside the <body> tag, we have a heading that uses the <em> tag to emphasize the word “fruits”. We also have an unordered list of fruits, where the name of each fruit is surrounded by the <em> tag to emphasize it. Finally, we have a paragraph that uses the <em> tag to emphasize the word “fruits” again.
When the XHTML is rendered in a web browser, the words surrounded by the <em> 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 <em> 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 <em> 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>em</em> tag”, and a <meta> tag that specifies the character encoding of the document as UTF-8.
Inside the <body> tag, we have a heading that uses the <em> tag to emphasize the word “fruits”. We also have an unordered list of fruits, where the name of each fruit is surrounded by the <em> tag to emphasize it. Finally, we have a paragraph that uses the <em> tag to emphasize the word “fruits” again.
When the XHTML is rendered in a web browser, the words surrounded by the <em> 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 <em> 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 <em> 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>em</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.
Inside the <body> tag, we have a heading that uses the <em> tag to emphasize the word “fruits”. We also have an unordered list of fruits, where the name of each fruit is surrounded by the <em> tag to emphasize it. Finally, we have a paragraph that uses the <em> tag to emphasize the word “fruits” again.
When the XHTML is rendered in a web browser, the words surrounded by the <em> 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.
