HTML i tag
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.
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.
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.
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.
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.