Balise HTML <i>
La balise HTML <i> marque du texte en voix ou ton alternatif — termes étrangers, termes techniques, noms taxinomiques, pensées — affiché en italique. Voir exemples.
La balise HTML <i> marque un fragment de texte qui se démarque de la prose environnante parce qu'il est dans une voix ou un ton différent. Par défaut, elle est rendue en italique, mais son rôle est sémantique, pas décoratif. Ce chapitre explique ce que la balise <i> signifie vraiment, en quoi elle diffère de <em>, quand l'utiliser, et comment elle se comporte vis-à-vis des technologies d'assistance.
Ce que <i> signifie réellement
En HTML5, <i> représente du texte qui se distingue de la prose normale sans impliquer de mise en emphase supplémentaire. Les usages typiques comprennent :
- Mots ou expressions étrangers —
<i lang="la">in situ</i>,<i lang="fr">déjà vu</i>. - Termes techniques introduits ou nommés, comme le nom d'une méthode dans un tutoriel.
- Noms taxinomiques (scientifiques) —
<i>Homo sapiens</i>,<i>Felis catus</i>. - Noms de navires ou de vaisseaux —
<i>HMS Beagle</i>. - La pensée d'un personnage citée en ligne dans une prose narrative.
Le navigateur affiche tout cela en italique, mais le sens est « ce passage de texte est conceptuellement distinct », pas « dites ceci plus fort ».
Pour les mots étrangers, ajoutez l'attribut lang (par exemple lang="la" pour le latin). Cela indique aux lecteurs d'écran de changer les règles de prononciation et aide les outils de traduction à ignorer le texte qui ne doit pas être traduit.
<i> vs. <em>
Voici la distinction la plus importante :
<em>véhicule une emphase de stress — le mot que vous prononceriez avec plus de force pour changer le sens d'une phrase. « Est-ce toi qui as mangé mon déjeuner ? » désigne une personne précise.<i>véhicule une voix ou un ton alternatif sans emphase ajoutée — un terme étranger, une pensée, un nom d'espèce.
Un test rapide : si lire le texte à voix haute vous amènerait naturellement à insister sur le mot, utilisez <em>. Si le mot est simplement d'une nature différente (étranger, technique, un nom de type titre), utilisez <i>.
Éléments frères présentateurs-mais-sémantiques apparentés :
<b>— attire l'attention (mots-clés, noms de produits) sans importance supplémentaire.<strong>— marque du texte d'une forte importance, gravité ou urgence.<cite>— le titre d'une œuvre créative citée (livre, film, article).<mark>— texte mis en surbrillance pour référence ou pertinence.
Accessibilité
L'élément <i> n'a aucun rôle ARIA implicite et ne transmet aucune emphase de stress aux lecteurs d'écran — un lecteur d'écran ne modifiera pas son ton pour le texte <i>. Ainsi, <i> est uniquement un indice sur la nature du texte, pas son importance.
Pour cette raison, si l'emphase doit vraiment atteindre les utilisateurs de technologies d'assistance (le sens de la phrase en dépend), utilisez plutôt <em>, que les lecteurs d'écran peuvent annoncer avec une accentuation vocale. Réservez <i> aux cas où l'italique concerne une catégorie, pas une force.
Syntaxe
La balise <i> va par paires. Le contenu est écrit entre les balises ouvrante (<i>) et fermante (</i>).
Exemple de la balise HTML <i>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Foreign phrase, with lang for correct pronunciation -->
<p>The samples were examined <i lang="la">in situ</i> before removal.</p>
<!-- Taxonomic name -->
<p>The domestic cat is <i>Felis catus</i>.</p>
<!-- A character's thought -->
<p>She paused at the door. <i>What if no one is home?</i></p>
</body>
</html>Attributs
La balise <i> prend en charge les Attributs globaux et les Attributs d'événements.
Mise en forme de la balise <i>
Conservez <i> pour sa signification sémantique et utilisez CSS uniquement pour ajuster son apparence — il n'est pas nécessaire de le remplacer par un élément non sémantique. Par exemple, vous pouvez conserver le style italique par défaut tout en changeant la couleur :
<style>
i {
color: #555;
}
</style>
<p>The domestic cat is <i>Felis catus</i>.</p>Si vous souhaitez l'italique uniquement pour une raison visuelle sans intention sémantique, préférez la propriété CSS font-style sur un élément ordinaire plutôt que d'ajouter une balise <i>.