Do you think IIT Guwahati certified course can help you in your career?
Introduction
The <em> tag in HTML is used to add emphasis to text. It stands for "emphasis," and when applied, it makes the text appear in italics by default in most browsers. This tag is used to highlight or stress a specific part of a sentence or phrase, indicating its importance.
In this article, you will learn the syntax of the <em> tag, how to use it with examples, and which browsers support it.
Definition and Usage
The <em> tag in HTML is used to emphasize text. It indicates that the enclosed text has stress emphasis compared to the surrounding text. Browsers typically display the contents of the <em> tag in italic type by default. However, you can change this using CSS if needed.
The <em> tag is an inline element, meaning it can be used within a paragraph or other block-level elements without disrupting the flow of content. It's important to note that the <em> tag should only be used for emphasis, not just to italicize text for styling purposes.
Let’s take a basic example of how to use the <em> tag:
<p>This is a normal paragraph with <em>emphasized text</em> within it.</p>
In this example, the words "emphasized text" would appear in italics to indicate emphasis.
Syntax of the <em> Tag
The <em> tag is a simple inline HTML element that is used to emphasize text. The basic syntax is as follows:
<em>Text to emphasize</em>
When this tag is used, the enclosed text will typically appear in italics in most browsers, although the exact style may vary depending on the browser and the CSS applied. The <em> tag should be used inside other HTML elements like paragraphs, divs, or span tags.
HTML <em> Tag Examples
Let’s discuss a few examples to demonstrate how the <em> tag works:
Example 1: Basic Emphasis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Emphasis Example</title>
</head>
<body>
<p>This is a <em>very important</em> point to remember.</p>
</body>
</html>
Output
Explanation:
In this example, the phrase "very important" will be emphasized, and in most browsers, it will be displayed in italics.
The <em> tag is placed inside a paragraph <p> tag to indicate that the emphasized text is part of the sentence.
Example 2: Using Emphasis for Emphasizing Words in Sentences
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Emphasis Example 2</title>
</head>
<body>
<p>The <em>quick</em> brown fox jumped over the lazy dog.</p>
</body>
</html>
Output
Explanation:
In this case, the word "quick" is emphasized and will appear in italics.
Using <em> helps to highlight the importance or urgency of certain words in a sentence.
Example 3: Emphasis with Other HTML Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emphasis with Other Tags</title>
</head>
<body>
<p>This is <em>extremely</em> important for your <strong>success</strong>!</p>
</body>
</html>
Output
Explanation:
In this example, the word "extremely" is emphasized using the <em> tag, while "success" is highlighted with the <strong> tag (which typically makes text bold).
Combining the two tags allows for different levels of emphasis. The <em> tag changes the text to italics, while the <strong> tag makes the text bold.
Example 4: Emphasis Inside a List
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Emphasis in List</title>
</head>
<body>
<ul>
<li><em>Emphasizing</em> this point is crucial.</li>
<li><em>Another</em> important detail.</li>
</ul>
</body>
</html>
Output
Explanation:
The <em> tag is used inside list items <li> to emphasize specific words.
It is important to use the <em> tag when you want to highlight key points in a list, helping users focus on them.
Why Use the <em> Tag?
Semantic Meaning: The <em> tag is not just for styling; it gives semantic meaning to the text. Using <em> tells search engines, screen readers, and other devices that the text is important.
Accessibility: The <em> tag is beneficial for screen readers. It helps visually impaired users understand that certain words or phrases in a webpage are emphasized.
SEO: Emphasizing specific keywords using the <em> tag may contribute to the search engine ranking of a page, as it indicates important information.
Browser Support for the <em> Tag
The <em> tag is well-supported by all modern browsers, including:
Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Opera
Since the <em> tag is a fundamental part of HTML, you can be confident that it will work in almost all web browsers. The text will be displayed in italics by default in browsers, but the appearance can be customized further with CSS.
Frequently Asked Questions
What does the <em> tag do in HTML?
The <em> tag is used to emphasize text in HTML, usually displayed in italics. It indicates that the enclosed text is important or needs special attention.
Can I change the default style of the <em> tag?
Yes, you can modify the style of the text inside the <em> tag using CSS. For example, you can change its color or font style.
Is the <em> tag the same as the <strong> tag?
No, the <em> tag is used for emphasis and typically displays text in italics, while the <strong> tag indicates strong importance and displays text in bold.
Conclusion
In this article, we will discuss how to use the <em> tag in HTML to add emphasis to text. We covered its basic syntax, examples of usage, and its browser support. The <em> tag is an essential tool for web designers and developers, enabling them to highlight important content on a webpage.
519+ registered 
