HTML - <em> Tag

The HTML <em> tag stands for "the emphasis element", It gives semantic meaning to the text contained within it and renders it in italics on the browser.

The <em> tag represents their content similarly to the <i> tag; the difference between the two tags is that the <em> element semantically emphasizes the important word while the <i> element is just offset text conventionally styled in italic.

Syntax

Following is the syntax of <em> tag −

<em> .... </em>

Example

In the following example, we are creating an HTML document and using the <em> tag to represent the important text, as follows −

<!DOCTYPE html>
<html>
<body>
   <h2>Example of em tag</h2>
   <p>This is <em>HTML em</em> tag, which specifies the important text from a paragraph </p>
</body>
</html>

On running the above code, the output window will pop p displaying the text on the webpage.

Example

Considering the following example, we create an HTML document and use the <em> tag with the CSS properties to style the content of the <em> tag as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      em {
         color: green;
         background-color: #fbb;
      }
   </style>
</head>
<body>
   <h2>Example of em tag</h2>
   <p>This is <em>HTML em</em> tag, which specifies the important text from a paragraph </p>
</body>
</html>

When we run the above code, it will generate an output consisting of the text along with a CSS applied to it displayed on the webpage.

Example

Let' look at the following example, we are creating an HTML document, and differentiate between <em> & <i> tag, as follows −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
</head>
<body>
   <h1>Difference between <i> & <em>
   </h1>
   <h2>
      <i>This sentence is in Italic</i>
   </h2>
   <h2>
      <em>This sentence has emphasized meaning.</em>
   </h2>
</body>
</html>

On running the above code, the output window will pop up displaying the text on the webpage.

html_tags_reference.htm
Advertisements