| by Arround The Web | No comments

HTML i tag

Fonts play a vital role in making a web page attractive for users. The size, style, and color of fonts also have a great impact on the look of the websites. CSS permits us to customize these font attributes using various generic font families, such as Sans-serif, Monospace, Cursive, Serif, and Fantasy. More specifically, on these fonts, CSS allows three major styles “italic”, “normal”, and “oblique”.

This post will guide you about the HTML <i> tag. Let’s start!

What is HTML <i> Tag?

HTML “<i>” tag is used to transform the style of the normal text as “italic”. Most of the time, it is used in a paragraph or a sentence to indicate technical terms, other language phrases, and more.


To utilize the HTML <i> tag, follow the given syntax:


In the above syntax:

  • <i> is the starting tag.
  • </i> is the ending tag.


Let’s implement an example to observe the behavior of <i> tag.


Example: How to Italicize Text in HTML?

In HTML, first, add a <div>. Inside this <div>, place a <i> tag and add the text that needs to appear in italic. After that, add the other required elements.


  <p>is a style of fonts!</p>

In CSS, we will apply several styles to the <div> element:

  • First, the “background-color” of the div is set as “rgb(68, 68, 68)”.
  • To give color to the text, the “color” property value is set as “rgb(251, 255, 0)”.
  • The “font-size” property value is set as “60px”, “font-family” as “serif”, and “text-align” as “center”.
  • After that, assign the “margin-top” property as “8px”.
  • width” as “90%”.
  • height” as “200px”.
  • padding” property value as “5px”.

You can set styling properties according to your requirements.


 div {
   background-color: rgb(68, 68, 68);
   color: rgb(251, 255, 0);
   font-size: 60px;
   font-family: serif;
   text-align: center;
   margin-top: 8px;
   width: 90%;
   height: 200px;
   padding: 5px;


So far, we have discussed how the HTML <i> tag works. In the next section, we will see how we can provide styles to text using CSS.

Font Styles in CSS

Besides using the HTML <i> tag, CSS also offers different font styles. Let’s move on to the next example that demonstrates the font-style property values of CSS.

Example: How to Use Font Styles in CSS?

Inside the body tag of the HTML file, add a <div>, and place three <p> tags, each having different class names as “italic”, “oblique”, and “normal” in it. Each <p> tag comprises some content on which the font styles need to be applied.


<p class="italic">HTML Font Style: italic</p>
<p class="oblique">HTML Font Style: oblique</p>
<p class="normal">HTML Font Style: normal</p>

In CSS, access each class and style the font respectively. To do so, the “p.italic” is used to access the <p> tag having a class named italic. Similarly, the “p.oblique” and “p.normal” are utilized to access the p tags having classes oblique and normal respectively. After that, the related font style will be set as italic, oblique, and normal using the font-style property.


p.italic {
  font-style: italic;

p.oblique {
  font-style: oblique;

p.normal {
  font-style: normal;

Now our web page will look like this:

We have explained the HTML <i> tag with some useful examples.


In HTML, the “<i>” tag is used to make the text italicized. You can also apply the font-style property to the text using CSS. The font-styles property values are italic, normal, and oblique. This blog discussed the HTML <i> tag with a practical example.

Share Button

Source: linuxhint.com

Leave a Reply