Add Emphasis Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the emphasis tag in HTML.
What is Emphasis Tag in HTML
The emphasis tag is an HTML tag that is used to emphasize a word or phrase on a web page. It is also known as the <em> tag. The <em> tag is often used to indicate the importance of a particular word or phrase in a sentence. Like italic tag it also create italicized words or phrases on the webpage.
The syntax for the emphasis tag is straightforward. It requires an opening and closing emphasis tag, and the text that needs to be emphasized is placed between these two tags.
Here's an example of how to use <em> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Emphasis Tag Example</title>
</head>
<body>
<p><em>Tim Berners-Lee</em> created <em>HTML</em> in 1993.</p>
</body>
</html>Difference between Emphasis Tag and Italic Tag
The <em> tag is often confused with the <i> tag as they both create italicized text on a webpage. However, there is a slight difference between the two.
The <em> tag is used to indicate the importance of a particular word or phrase in a sentence, whereas the <i> tag is used for creating italicised words or phrases like technical term, book title or important words from another language, etc.
Attributes of Emphasis Tag
Here are the attributes we can use with the emphasis tag:
- id
- class
- style
- title
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the emphasis tag and use it to apply a specific style to that particular tag.
Example
<p>This is an <em id="etext">emphasised</em> text.</p>In the above example, we assign an id attribute to the em tag with a value etext. In CSS and JavaScript, we can use the name etext to access the specific em tag whose id value is set to the name etext.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the emphasis tags and use it to apply a specific style to all the emphasis tags that belong to a particular class.
Example
<p>This is an <em class="info">emphasised</em> text.</p>
<p>This is another <em class="info">emphasised</em> text.</p>In the above example, both em tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both em tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the emphasis tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<p>This is an <em style="color: red">emphasised</em> text.</p>The style="color: red" will change the color of the emphasis tag to red color.
title
The title attribute can be used to add a tooltip or additional information to the emphasis tag, which will only appear when the user places the mouse cursor on the emphasis text.
Example
<p><em title="HyperText Markup Language">HTML</em> is the standard language for creating the content and structure of web pages and web applications.</p>Nesting of Bold and Emphasis Tags
It is possible to nest <em> tag within the <b> tag and vice versa to indicate a higher level of importance.
Example
<p><b><em>HTML</em></b> is the standard language for creating the content and structure of web pages and web applications.</p>