<i>

Description

L’élément <i> indique un texte qui se distingue du texte courant par convention typographique : termes techniques, mots en langue étrangère, titres d’œuvres, pensées de personnages dans un récit, noms de navires. Il ne véhicule pas d’emphase — pour cela, utiliser <em>.

Syntaxe

<p>Le terme <i>lorem ipsum</i> vient du latin.</p>

Exemples

Terme technique ou scientifique :

<p>L'espèce <i>Homo sapiens</i> est apparue il y a environ 300 000 ans.</p>

Titre d’une œuvre :

<p>J'ai lu <i>Le Petit Prince</i> de Saint-Exupéry.</p>
<!-- Note : <cite> est plus sémantiquement correct pour les titres d'œuvres -->

Icône avec texte masqué :

<button>
  <i class="icon icon-close" aria-hidden="true"></i>
  <span class="sr-only">Fermer</span>
</button>

Notes

<i> pour les icônes (framework CSS) : de nombreux frameworks (FontAwesome, Material Icons) utilisent <i> pour afficher des icônes via CSS. C’est un usage non-sémantique mais répandu. Toujours ajouter aria-hidden="true" et un texte alternatif accessible.

<i> vs <em> : <em> change le sens via l’emphase ; <i> est une convention typographique. Si la mise en italique exprime une vraie emphase linguistique, utiliser <em>.

Titres d’œuvres : <cite> est sémantiquement plus précis que <i> pour les titres d’œuvres créatives.