<span>

Description

L’élément <span> est l’équivalent inline de <div> : il ne porte aucune sémantique propre. Il sert à envelopper une portion de texte ou d’inline pour y appliquer des styles CSS ou la cibler via JavaScript, quand aucun élément inline sémantique (<strong>, <em>, <code>…) ne convient.

Syntaxe

<p>Le texte est en <span class="rouge">rouge</span> ici.</p>

Exemples

Mise en couleur d’un mot :

<p>Appuyez sur la touche <span class="touche">Entrée</span> pour valider.</p>

Ajout d’une icône inline :

<button>
  <span aria-hidden="true">★</span>
  Ajouter aux favoris
</button>

Ciblage JavaScript :

<p>Votre solde : <span id="solde">0</span> €</p>

Notes

Préférer les éléments sémantiques : <strong> pour l’importance, <em> pour l’emphase, <code> pour le code, <abbr> pour les abréviations. <span> est la solution de dernier recours quand aucun autre élément ne convient.

<span> n’est pas focusable par défaut. Pour un élément interactif inline, utiliser <button> ou <a>.