How do we include an emphasized text in HTML?


To Emphasize the text content in HTML we use <em> tag. It is same as <italic> tag. It has closing and opening tags, <em></em>. The <em> tag is a phrase tag. It renders as emphasized text.

<em>Emphasized text</em>

The text that is present in between open and closing tags of <em> appears in an italic form. The main difference between italic <i> and emphasized tag <em> is that, emphasized tag semantically emphasizes on section of words whereas <i> tag shows text in italic which indicate alternative mood. The effects of <em> tag can be achieved by using CSS property.

Syntax

Following is the usage of <em> tag in CSS −

em {
   font-style: italic;
}
  • <em> tag supports both global and event attributes.

  • <em> element is placed within <body> tag.

  • It is used to separate the text from rest of the content.

  • We can also change the behavior of <em> tag by applying CSS.

  • <em> attribute does not hold values.

  • All browsers support <em> tag.

Example

Following is the example demonstrating the usage of the <em> tag in HTML −

<!DOCTYPE html>
<html>
<body>
   <h1>Demonstrating em element</h1>
   <p>HTML stands for <em>Hyper Text Markup Language </em> created by <em>Berners-Lee </em>in late 1991 </p>
   <p>HTML is designed to create <em>Web Pages</em>  </p>
</body>
</html>

Example

Following is another example of the <em> tag with title attribute to create emphasized text.

<!DOCTYPE html>
<html>
<head>
   <title> Inserting Emphasized text using HTML </title>
</head>
<body style="text-align: center;">
   <h1 style="color:red;"> HTML Tutorial </h1>
   <h3> Inserting Emphasized text using HTML </h3>
   <em title="Emphasized text"> Welcome To TutorialsPoint </em>
</body>
</html>

Example

Following is an example of the <em> tag using CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      em {
         font-style: italic;
         background-color: yellow;
         text-emphasis-color: green;
         text-emphasis-style: "*";
      }
   </style>
</head>
<body>
   <p>An Emphasized element can be displayed like this:</p>
   <em>HTML Tutorial</em>
   <p>To see the effects, Change the default CSS settings .</p>
</body>
</html>

Example

There is a text - emphasis property is also present to highlight the text, let us see an example of text-emphasis by using CSS. Following is the example, demonstrate the text-emphasis property.

<!DOCTYPE html>
<html>
<head>
   <style>
      p.ex1 {
         text-emphasis: filled;
      }
      p.ex2 {
         text-emphasis: open;
      }
      p.ex3 {
         text-emphasis: double-circle red;
      }
      p.ex4 {
         text-emphasis: triangle blue;
      }
   </style>
</head>
<body>
   <h1>Demonstrating text-emphasis Property</h1>
   <p class="ex1">Welcome To My World</p>
   <p class="ex2">It's a Beautiful World</p>
   <p class="ex3">Learn HTML with Fun</p>
   <p class="ex4">Door's Open</p>
</body>
</html>

Updated on: 06-Oct-2023

235 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements