Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create an italic text in HTML
In HTML the text can be represented in italic using <i> tag. The text present in between <i> tag open and closing is represented in italic format. <i> tag is called as Idiomatic text element.
Syntax
Usage of <i> tag in HTML is shown below −
<html> <body> <p> Hello Welcome to <i>My World</i></p> </body> </html>
In the above syntax, the sentence between <i> open and close tag represent in italic format.
Hello Welcome to My World.
If we want to represent phrases that are present in different languages than their surroundings, we use lang attribute inside <i> tag. The <i> tag is not used for styling purposes. By using CSS font-style property we can style text in italics.
Example
Let us see and example of the <i> tag in HTML −
<!DOCTYPE html>
<html>
<head>
<style>
i {
font-style: italic;
}
</style>
</head>
<body>
<p>The Italic element is displayed like this:</p>
<i>Welcome to My World</i>
<p>If you want to see the effects, Change the default CSS settings .</p>
</body>
</html>
Example
Following is another example, demonstrating the usage of <i> tag inside the head section -
<!DOCTYPE html>
<html>
<head>
<h1>TutorialsPoint WebSite</h1>
<h2>
<i> www.tutorialspoint.com</i>
</h2>
</head>
<body>
<p>The Italic element is displayed in the Head section of HTML document</p>
</body>
</html>
The <em> tag
To Emphasize the text content in HTML we use <em> tag. It is same as <italic> tag. 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, 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.
Now let us see a program, demonstrating the usage of the emphasize and italic tags in HTML −
Example
In this example we are trying to use the <em> and <i> tags together −
<!DOCTYPE html>
<html>
<head>
<style>
em {
font-style: italic;
background-color: yellow;
text-emphasis-color: green;
text-emphasis-style: "*";
}
i {
font-style: italic;
background-color: pink;
}
</style>
</head>
<body>
<p>An Emphasized element and italic text can be displayed like this:</p>
<em>HTML Tutorial</em>
<br>
<br>
<i>Best Tutorial WebSite</i>
<p>To see the effects, Change the default CSS settings .</p>
</body>
</html>
425 Views
