HTML Element

Publish in HTML Tutorial el 24/05/2025 15:33

The HTML  element represents a range of text that is set off from the normal text for some reason. The content is typically displayed in italic type. While this element was often used simply to apply italic styling in the past, in HTML5 it has semantic meaning and should be used to represent text that is in an alternate voice or mood, or otherwise offset from the normal prose.

Common use cases for  include:

Technical terms
Foreign language phrases
Thoughts (like in narrative)
Ship names in Western texts
Book/movie/song titles (though <cite> may be more appropriate)

Basic Syntax

Here's how the basic  element looks in code:

And here's how it renders:

This is italicized text within a paragraph.

Examples of Usage

Example 1: Foreign Words

The  element is perfect for marking foreign words or phrases:

Play Code

    <p>The French phrase <i lang="fr">je ne sais quoi</i> describes an indescribable quality.</p>

Example 2: Technical Terms

Use  to highlight technical terms when they first appear:

Play Code

    <p>In biology, <i>Homo sapiens</i> is the scientific name for modern humans.</p>

Example 3: Thoughts in Narrative

The  element can represent a character's thoughts in fiction:

Play Code

    <p>She looked at the clock. <i>I'm going to be late again,</i> she thought.</p>

Example 4: Dynamic Italics with JavaScript

Here's how you can toggle italic styling with JavaScript:

Play Code

    <p id="toggleText">Click the button to toggle italics.</p>
    <button onclick="document.getElementById('toggleText').innerHTML = 
      document.getElementById('toggleText').innerHTML.includes('<i>') ? 
      'Click the button to toggle italics.' : 
      'Click the <i>button</i> to toggle italics.'">Toggle Italics</button>

Example 5: Combining with Other Semantic Elements

This example shows how  can be combined with other semantic elements:

Play Code

    <p>The <abbr title="HyperText Markup Language">
        <i>HTML</i></abbr> specification recommends using 
        <i> for 
    <i>specific semantic purposes</i>, not just for styling.
    </p>

Tips and Best Practices

Don't use  just for visual styling - use CSS for that purpose (font-style: italic).
Consider using the lang attribute when marking foreign words.
For emphasis, use  instead, as it carries semantic meaning for screen readers.
For book/movie titles, consider <cite> which is more semantically appropriate.
You can combine  with other semantic elements when appropriate.

Accessibility Considerations

Screen readers typically don't announce  elements differently unless they contain semantic information (like the lang attribute). If you're trying to convey emphasis, use  instead, as screen readers will change their tone when encountering emphasized text.