Élément générique
La balise <span> est un élément HTML de type EN LIGNE qui ne modifie rien à l'affichage par lui-même. Elle sert uniquement de crochet : un point d'ancrage sur lequel une feuille de style ou un script peut venir agir, sans casser le flux du texte autour.
Contrairement à <div>, qui isole un bloc entier de la page, <span> reste à l'intérieur d'une ligne — il ne provoque jamais de retour à la ligne avant ou après lui, sauf si on lui demande explicitement le contraire.
Étape 1 — Styliser une portion de texte avec span : pourquoi pas juste du texte brut ?
Sans <span>, impossible de cibler un seul mot au milieu d'une phrase pour lui donner une couleur ou une graisse différente — il faudrait styliser tout le paragraphe. <span> encercle uniquement le texte qu'on veut isoler, le reste de la phrase n'est pas concerné :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Balise span</title>
</head>
<body>
<p>Ceci est un <span style="color:red;">mot important</span> au milieu d'une phrase.</p>
</body>
</html>
Résultat attendu :
Ceci est un mot important au milieu d'une phrase. ↳ Seul « mot important » s'affiche en rouge, le reste du paragraphe garde sa couleur normale et la phrase reste sur une seule ligne.
La phrase n'a pas été coupée : <span> a laissé le texte en ligne tout en appliquant sa couleur à trois mots seulement.
Étape 2 — Cibler un span avec une classe CSS plutôt qu'un style en ligne
Répéter style="color:red;" sur chaque span devient vite ingérable dès qu'il y en a plusieurs sur une page. Une classe CSS centralise la règle à un seul endroit : on la change une fois, elle s'applique partout où la classe est utilisée.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Balise span avec classe</title>
<style>
/* La classe centralise le style, réutilisable sur n'importe quel span */
.alerte { color: red; font-weight: bold; }
</style>
</head>
<body>
<p>Ceci est un <span class="alerte">mot important</span> au milieu d'une phrase.</p>
<p>Un <span class="alerte">deuxième avertissement</span> plus loin dans la page.</p>
</body>
</html>
Résultat attendu :
Les deux passages « mot important » et « deuxième avertissement » s'affichent en rouge et en gras, avec une seule règle CSS définie une fois dans .alerte.
⚠ Si le texte ne change pas de couleur, vérifiez que le nom de la classe dans class="alerte" correspond exactement à celui déclaré dans la feuille de style — CSS est sensible à la casse sur les noms de classe.
Ses attributs : span a-t-il des attributs qui lui sont propres ?
En résumé : non — <span> n'a aucun attribut spécifique. Elle accepte uniquement les attributs globaux HTML, disponibles sur la quasi-totalité des éléments de la page :
- id — identifiant unique, utile pour cibler un span précis en CSS ou en JavaScript
- class — une ou plusieurs classes CSS, réutilisables sur plusieurs span
- style — déclaration CSS directe, à réserver aux cas ponctuels (une classe reste préférable pour du style répété)
- title — infobulle affichée au survol de la souris
- lang — langue du texte contenu, utile quand un mot étranger apparaît dans une phrase
- data-* — attribut personnalisé pour stocker une donnée récupérable en JavaScript
Étape 3 — Transformer un span en bloc avec l'attribut style
Un span reste inline par défaut, mais rien n'empêche de forcer un autre comportement via style. En lui donnant display: block, on le fait sortir de son comportement naturel — il se comporte alors comme une balise <div>, avec bordure et fond possibles :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Span transformé en bloc</title>
</head>
<body>
<span style="border:solid 1px black; background:lightsteelblue; width:300px; display:block;">
<table width="95%" cellpadding="0" cellspacing="0">
<tr><td align="center">Ligne 1</td></tr>
<tr><td align="left">Ligne 2</td></tr>
<tr><td align="right">Ligne 3</td></tr>
<tr><td align="center">Ligne 4</td></tr>
</table>
</span>
</body>
</html>
Résultat attendu :
Un cadre bleu-gris de 300px de large s'affiche, bordé de noir, contenant un tableau de 4 lignes aux alignements différents (centré, gauche, droite, centré).
⚠ À ce stade, <div> serait le choix le plus logique pour ce même résultat — span convient à un morceau de texte inline, pas à une structure de bloc complète. Cet exemple montre surtout que display: block peut annuler le comportement inline par défaut, pas qu'il faille l'utiliser ainsi en pratique.
En résumé : la différence entre <span> et <div> tient uniquement à leur affichage par défaut — inline pour span, bloc pour div — et non à une capacité technique différente : les deux acceptent les mêmes attributs globaux et peuvent être stylés de la même façon.
Vous êtes ici : Balise SPAN Retour à la liste des balises
Par carabde : 10 mars 2014 | Mis à jour le 18 juillet 2026