<span>
Un conteneur en ligne générique sans signification, pour styliser un fragment de texte.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p>Votre progression : <span style="color: #34d399; font-weight: 600;">12 sur 20</span> leçons</p>
<p>
Forfait :
<span style="padding: 2px 10px; border-radius: 999px; background: #7c3aed; color: white;">Premium</span>
</p>Définition et utilisation
#L’élément <span> est l’équivalent en ligne de <div>. Il englobe un fragment de texte à l’intérieur d’une ligne, par exemple un mot, un nombre ou une icône, pour qu’on puisse le styliser ou le retrouver en JavaScript. Il n’interrompt pas la ligne et, en lui-même, ne signifie rien.
Avant de l’utiliser, vérifiez qu’il n’existe pas un meilleur élément. Un texte important, c’est <strong>, un accent, c’est <em>, une mise en évidence, c’est <mark>, du code, c’est <code>, et une date, c’est <time>. Réservez <span> aux situations où aucun d’eux ne convient : une étiquette colorée, un compteur mis à jour par un script, ou un fragment de texte dans une autre police.
Il ne peut contenir que du contenu phrasant, donc ne mettez pas de paragraphes ni d’éléments <div> dans un <span>. En tant qu’élément en ligne, il ignore aussi width et height, et les marges verticales n’écartent pas les lignes voisines. Si vous en avez besoin, changez son display en inline-block.
Syntaxe
#<span>fragment de texte</span>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<p>Il reste <span id="seconds">10</span> s avant la fin de la promotion.</p>
<script>
let left = 10;
const counter = document.getElementById('seconds');
const timer = setInterval(() => {
left -= 1;
counter.textContent = left;
if (left === 0) clearInterval(timer);
}, 1000);
</script>Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Cherchez d’abord un élément avec une signification précise :
<strong>,<em>,<mark>,<code>ou<time>. - N’imbriquez pas d’éléments de bloc, comme
<div>ou<p>, dans un<span>. - Si un
<span>ne contient qu’une icône décorative, ajoutez-luiaria-hidden="true", et transmettez le sens par un texte à côté.
Entrées associées
#- <div> vs <span><div> est un conteneur de bloc sans signification, et <span> son équivalent en ligne. Les deux servent seulement à grouper et styliser, jamais à décrire le contenu.
- <div>Un conteneur de bloc générique sans signification, pour grouper des éléments et les styliser.
- <strong>Un texte de grande importance : un avertissement, une information clé.
- <em>Un accent dans la phrase : un mot qui, à la lecture à voix haute, se prononce avec insistance.
- <mark>Met en évidence un fragment de texte comme un surligneur, parce qu’il est pertinent dans le contexte actuel.
- <code>Un fragment de code informatique : le nom d’une variable, d’une fonction, d’une balise ou d’un fichier, ainsi qu’un court extrait.
- <p>Un paragraphe de texte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.