Docs HTML exécutables : Balise span

Q: Quelle est la différence entre div et span ?

Une est un bloc : elle commence sur une nouvelle ligne et prend toute la largeur. Un est inline : il reste dans la ligne de texte et n'est pas plus large que son contenu. Utilisez div pour regrouper des blocs de contenu, span pour marquer des mots dans un texte.

Q: Pourquoi width ne marche pas sur mon span ?

Les éléments inline ignorent width, height et les marges verticales. Donnez au span display: inline-block pour qu'il reste dans la ligne tout en acceptant une taille, ou display: block pour qu'il se comporte comme une div.

Balise span HTML : styliser une partie du texte, div ou span

La balise <span> est un conteneur inline générique : elle entoure quelques mots dans une ligne pour que vous puissiez les styliser ou les manipuler en script sans couper la ligne. Découvrez comment l'utiliser, en quoi elle diffère de div et quand une balise plus précise convient mieux.

Cette page contient des éditeurs exécutables - modifiez, exécutez et voyez la sortie instantanément.

Par Kevin Spektor, Co-founder & CTO

Publié le Sep 24, 2026

Le rôle de la balise span

<span> entoure un morceau de texte dans une ligne pour que vous puissiez le styliser ou le retrouver en JavaScript. C'est le jumeau inline de <div> : il n'a ni signification ni apparence par défaut, et il ne commence pas de nouvelle ligne.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

La phrase reste sur une seule ligne. Seuls les mots entourés changent.

div ou span

Les deux ont le même but (un conteneur sans signification) et diffèrent par leur place dans la page :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

La div coupe la phrase en trois lignes et s'étire sur toute la page ; le span reste dans la phrase et épouse son texte.

	`<div>`	`<span>`
Affichage	Bloc	Inline
Commence une nouvelle ligne	Oui	Non
Largeur	Toute la largeur disponible	Celle de son contenu
`width`, `height`, marge verticale	Appliqués	Ignorés
Peut contenir	Tout, y compris des blocs	Seulement du texte et des éléments inline
Usage typique	Sections, cartes, conteneurs de mise en page	Un mot ou une expression dans un texte

Autre différence : une <div> n'est pas autorisée dans un <p>, et le navigateur ferme le paragraphe trop tôt si vous essayez, alors qu'un span peut aller partout où va du texte. Plus de détails sur la page div.

Styliser un span : ce qui marche et ce qui ne marche pas

La couleur, la police, le fond et le padding horizontal fonctionnent tous sur un span. La taille, non : un élément inline ignore width, height et les marges du haut et du bas. Passez-le en inline-block pour lui donner une taille tout en le gardant dans la ligne :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

Le premier span est aussi large que ses mots. Le second fait exactement 120 sur 40 pixels et reste dans la phrase.

Des span avec JavaScript

Un span est l'emplacement habituel d'une valeur qu'un script remplit, comme un compteur ou un nom d'utilisateur :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Seul le nombre change ; le reste de la phrase reste intact.

Quand une balise précise vaut mieux qu'un span

Un span n'a pas de signification, donc un lecteur d'écran le lit comme du texte simple. Quand les mots ont un rôle, utilisez la balise de ce rôle et stylisez-la comme vous voulez :

Signification	Utilisez à la place d'un span
Texte important	`<strong>`
Accentuation	`<em>`
Texte surligné ou marqué	`<mark>`
Code, nom de fichier	`<code>`
Touche du clavier	`<kbd>`
Date ou heure	`<time datetime="2026-09-24">`
Texte dans une autre langue	`<span lang="fr">` (span plus l'attribut `lang`)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

La page sur le gras explique la différence entre <strong>, <b>, <em> et <i>.

Erreurs fréquentes

Mettre width sur un span simple. C'est ignoré. Utilisez display: inline-block.
Mettre une div ou un paragraphe dans un span. Du HTML invalide qui coupe la ligne. Remplacez le span extérieur par une div.
Des span cliquables. Comme une div, un span avec onclick est inaccessible au clavier. Utilisez un <button> ou un lien.
Un span pour chaque style. Si des paragraphes ou des sections entiers ont besoin d'un style, mettez la classe sur le <p> ou le conteneur lui-même au lieu d'entourer son texte d'un span.

Questions fréquentes

Qu'est-ce qu'un span en HTML ?

<span> est un conteneur inline générique. Il entoure une partie d'une ligne de texte, par exemple un mot, pour que le CSS ou le JavaScript puisse le cibler, et il n'a ni apparence ni signification propre.

Quelle est la différence entre div et span ?

Une <div> est un bloc : elle commence sur une nouvelle ligne et prend toute la largeur. Un <span> est inline : il reste dans la ligne de texte et n'est pas plus large que son contenu. Utilisez div pour regrouper des blocs de contenu, span pour marquer des mots dans un texte.

Pourquoi width ne marche pas sur mon span ?

Les éléments inline ignorent width, height et les marges verticales. Donnez au span display: inline-block pour qu'il reste dans la ligne tout en acceptant une taille, ou display: block pour qu'il se comporte comme une div.

Comment changer la couleur d'un seul mot en HTML ?

Entourez le mot d'un span avec une classe et colorez-le en CSS : <span class="accent">word</span> avec .accent { color: #2563eb; }. Pour un cas ponctuel, <span style="color: #2563eb">word</span> fonctionne aussi.

Un span peut-il contenir une div ?

Non. Un span ne peut contenir que du contenu inline comme du texte, des liens, des images et d'autres span. Les navigateurs affichent quand même une div dans un span, mais c'est du HTML invalide qui coupe la ligne : faites plutôt de l'élément extérieur une div.

Concepts liés