Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Include 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>
402 Views
