<i> Tag in HTML

Syntax of <i> Tag in HTML

Syntax:

Default CSS for i Element:

Example:

Output:

<i> Tag Attributes

<i> tag supports all the global and event attributes, some of the important ones are listed below:

Global Attributes:

• class: refers to the class name for styling using CSS,
• id: refers to a unique id for events and styling,
• style: used to add inline-css to the element,
• dir: refers to the direction of the text on the output page, etc.

Event Attributes:

• onload: when the page has finished loading, this method is called.
• onmessage: when a message is triggered, the script will run.
• ononline: when the browser is connected to the internet, then this method is called, etc.

How to Use <i> Tag in HTML?

• Readability of the visitors of your webpage is very important, and to improve readability, we use the <i> tag in HTML. <i> tag makes a text separated (italicized) from the rest of the text, these separated words/text could be a group that has distinct semantic meanings from the rest of the text, for example:

  • A different tone or emotion
  • Technical jargon
  • Taxonomic nomenclature
  • Thoughts (for example, "She thought, Will it rain tomorrow? "), etc.

• Earlier in HTML standards, the <i> tag was just an element used for showing a specialized text in italics, similar to how the <b> element. <b> tag is used to display text in bold typeface. This is no longer the case, as these tags now specify semantics rather than aesthetics. Although a browser may still display the contents of the <i> element in the italic typeface, it is no longer necessary. Coders should utilize the CSS font-style attribute to display the italicized text.

• We use <i> tag in HTML when there is no other appropriate semantic element is supported, for example:

  • <em>: Emphasized text
  • <cite>: Title of a creative work
  • <dfn>: Definition of a term

  All these above tags also make the specific text in italics typeface.

<i> Tag Examples

1. <i> Tag to Make the Italic Text in HTML.

Output:

2. <i> Tag && <p> Tag to Illustrate the Difference in the Text Appearance While Rendering It.

Output:

3. <i> Element to Mark Text That is in Another Language

Output:

Browser Support

<i> tag in HTML is supported in almost all browsers. Some of them are mentioned below:

• Google Chrome
• Microsoft Edge/IE
• Mozilla Firefox
• Opera
• Safari