Balise HTML <span>
La balise HTML <span> est un conteneur inline générique sans signification sémantique, utilisée pour styliser ou scripter du texte. Exemples et bonnes pratiques.
La balise HTML <span> est un conteneur inline générique pour un morceau de texte ou de contenu. Contrairement à la plupart des éléments HTML, elle ne porte aucune signification sémantique — elle n'indique ni au navigateur ni aux technologies d'assistance ce qu'est le contenu. Son seul rôle est de marquer une portion de contenu inline afin de pouvoir la cibler avec CSS ou JavaScript.
Parce qu'elle n'ajoute aucune signification, <span> doit être votre dernier recours, et non votre premier choix. Chaque fois qu'un élément sémantique correspond au contenu, préférez-le :
| Si le texte est… | Utilisez ceci plutôt que <span> |
|---|---|
| mis en emphase | <em> |
| important / fort | <strong> |
| mis en surbrillance / pertinent | <mark> |
| une abréviation | <abbr> |
| du code | <code> |
| une date ou une heure | <time> |
Utilisez <span> uniquement lorsqu'aucun élément inline sémantique ne convient et que vous avez simplement besoin d'un point d'accroche pour le style ou le script — par exemple, colorier un seul mot, envelopper un caractère pour un effet de lettrine, ou étiqueter une icône décorative.
Préférer les éléments sémantiques
Les deux extraits ci-dessous sont identiques visuellement dans le navigateur, mais ne sont pas équivalents. Le premier utilise un <span> avec un style inline ; le second utilise <mark>, qui communique réellement « ce texte est mis en surbrillance pour sa pertinence » aux lecteurs d'écran et aux moteurs de recherche.
<!-- Just visual — no meaning conveyed -->
<p>Search results for <span style="background:yellow;">CSS</span> grid.</p>
<!-- Semantic highlight — assistive tech understands it -->
<p>Search results for <mark>CSS</mark> grid.</p>Lorsque vous avez seulement besoin d'un point d'accroche pour le style et qu'il n'existe pas d'équivalent sémantique, <span> est le bon outil. Lorsque le style reflète une signification, choisissez l'élément qui porte cette signification.
<span> vs <div>
<span> et <div> sont les deux conteneurs génériques « sans signification » en HTML. La différence réside dans le type de boîte qu'ils créent :
<span>est inline — il s'intègre dans une ligne de texte et n'occupe que la largeur de son contenu. Il ne peut pas légalement contenir des éléments de niveau bloc.<div>est de niveau bloc — il commence sur une nouvelle ligne et s'étend sur toute la largeur de son parent. Utilisez-le pour regrouper des sections plus larges.
<p>This sentence has an <span style="color:#8ebf42;">inline span</span> in the middle.</p>
<div style="border:1px solid #8ebf42;">
This div is a block — it sits on its own line and fills the row.
</div>Règle générale : utilisez <span> pour une portion d'une ligne, et <div> pour un bloc de contenu.
Syntaxe
La balise <span> s'utilise en paires. Le contenu est écrit entre la balise ouvrante (<span>) et la balise fermante (</span>).
Dans l'exemple ci-dessous, nous appliquons un style directement à l'intérieur de la balise.
Exemple de la balise HTML <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Voyons un autre exemple où nous ajoutons un attribut class à la balise et appliquons les styles séparément dans une feuille de style. Cela crée une lettrine — une première lettre surdimensionnée, une touche typographique classique pour l'ouverture d'un chapitre.
Exemple de la balise HTML <span> avec l'attribut class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Make the first letter much larger */
position: relative; /* Position it relative to its normal spot */
top: 7px; /* Nudge it down to align with the text */
}
</style>
</head>
<body>
<!-- The first letter "S" is wrapped in a span so we can style it alone -->
<p>
<span class="letter">S</span>he brought in disgusting, disturbing yellow
flowers in her hands. And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Cas d'utilisation pour l'accessibilité
Deux modèles rendent <span> véritablement utile pour l'accessibilité.
Texte visible uniquement par les lecteurs d'écran. Une classe visually-hidden masque le texte à l'écran, mais le garde disponible pour les lecteurs d'écran. C'est la méthode standard pour fournir un contexte que les utilisateurs voyants obtiennent grâce à la mise en page.
<a href="/cart">
View cart
<span class="visually-hidden">(3 items)</span>
</a>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>Étiquetage des icônes. Les polices d'icônes et les glyphes décoratifs n'ont pas de texte qu'un lecteur d'écran peut annoncer. Masquez le <span> décoratif avec aria-hidden et fournissez un nom accessible avec aria-label sur le lien ou le bouton.
<button aria-label="Close dialog">
<span aria-hidden="true">×</span>
</button>Ici, aria-hidden="true" supprime le « × » visuel de l'arborescence d'accessibilité, tandis qu'aria-label indique aux technologies d'assistance que le bouton signifie « Fermer la boîte de dialogue ».
Attributs
<span> n'a pas d'attributs propres. En pratique, ces attributs globaux font presque tout le travail :
| Attribut | Rôle |
|---|---|
class | Associer l'élément à une ou plusieurs règles CSS. |
id | Attribuer un identifiant unique pour le ciblage CSS ou JavaScript. |
style | Appliquer du CSS inline directement (pratique pour un style ponctuel). |
lang | Marquer une portion de texte comme appartenant à une autre langue, ex. <span lang="fr">. |
La balise prend également en charge les attributs d'événement, ce qui vous permet de réagir aux actions de l'utilisateur telles que les clics ou les survols. Un événement se produit lorsque le navigateur réagit à une action de l'utilisateur — cliquer avec la souris, lire une vidéo, soumettre un formulaire, etc.