HTML <i> Tag

The HTML <i> tag is used to display text in an italicized style. Initially, it was intended for typographical purposes like emphasizing or highlighting foreign words, technical terms, or phrases. However, it does not convey any semantic meaning on its own and is now primarily used for styling purposes when italicized text is needed.

The <i> tag is a phrase tag, and modern usage often focuses on styling text for visual presentation rather than emphasis or semantics, which is better handled by the <em> tag.

Basic Syntax of HTML <i> Tag

The basic structure of the <i> tag is:

</>
Copy
<i>Text to be italicized</i>

The text enclosed within the <i> tag will appear in an italic font style.

Attributes of HTML <i> Tag

  • Global Attributes: The <i> tag supports all global attributes, such as id, class, style, and title.
  • Event Attributes: The <i> tag supports event attributes, such as onclick, onmouseover, and onkeydown.

Basic Example of HTML <i> Tag

Here’s a simple example of using the <i> tag to italicize text:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>This is a <i>simple example</i> of italicized text.</p>
    </body>
</html>
Basic Example of HTML <i> Tag

Explanation: The words “simple example” are italicized using the <i> tag.

Using the <i> Tag for Styling

You can use the <i> tag to style specific parts of your text, such as foreign phrases or technical terms:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>The term <i>et cetera</i> is often abbreviated as etc.</p>
        <p>The word <i>schadenfreude</i> is borrowed from German.</p>
    </body>
</html>
Using the <i> Tag for Styling

Explanation: The <i> tag is used to italicize specific words, adding visual distinction without conveying additional semantic meaning.

Styling the <i> Tag with CSS

You can apply CSS to the <i> tag for customized styling:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            i {
                color: #007BFF;
                font-style: italic;
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <p>This is a <i>styled</i> example of italicized text.</p>
    </body>
</html>
Styling the <i> Tag with CSS

Result: The italicized text appears in blue, with a larger font size and an italic font style.

Using <i> with Screen Readers

The <i> tag is purely presentational and does not provide semantic emphasis. If you want to add semantic meaning, consider using the <em> tag instead, as it conveys emphasis to screen readers and improves accessibility.

Practical Applications of the <i> Tag

  • Foreign Words: Italicize words or phrases borrowed from other languages.
  • Technical Terms: Distinguish technical jargon or newly introduced terms in a document.
  • Visual Styling: Add visual distinction to specific parts of a webpage where italicized text is needed.
  • Non-Semantic Use: Use the <i> tag for styling purposes without conveying any additional meaning.