<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.
Comparaison point par point
#display par défaut
Commence une nouvelle ligne
Respecte width, height et margin-top/bottom
Peut contenir des éléments de bloc
Utilisation typique
Exemple
#<div style="display: flex; gap: 12px; align-items: center;">
<div class="box">JS</div>
<div>
<strong>Cours JavaScript</strong><br>
Votre progression : <span style="color: #34d399; font-weight: 600;">12 sur 20</span> leçons
</div>
</div>Définition et utilisation
#Les deux éléments sont neutres : pour le navigateur, les lecteurs d’écran et les moteurs de recherche, ils ne signifient rien. Ce qui les distingue, c’est leur display par défaut. <div> est un élément de bloc : il commence une nouvelle ligne, s’étend sur toute la largeur du parent et respecte width, height ainsi que les marges verticales. <span> est en ligne : il s’écoule dans le texte, n’interrompt pas la ligne, et sa largeur comme sa hauteur sont ignorées jusqu’à ce que vous changiez son display.
Cela se traduit aussi dans le contenu qu’ils peuvent accueillir. <div> accepte n’importe quel contenu de flux : des paragraphes, des listes, d’autres <div>, même des titres. <span> n’accepte que du contenu phrasant, c’est-à-dire du texte et d’autres éléments en ligne. Y placer un paragraphe ou une liste est une erreur.
Avant d’utiliser l’un des deux, vérifiez qu’un élément sémantique ne convient pas mieux. Un groupe de contenu devrait souvent être <section> ou <article>, et un fragment de texte <strong>, <em> ou <mark>. <div> et <span> restent pour les situations où aucun des deux ne convient.
Syntaxe
#<div>...</div>
<span>...</span>Plus d’exemples
#<p>
L’élément <span style="width: 200px; height: 100px; background: #7c3aed;">span</span> a
width et height dans son style, mais cela ne fonctionne pas, car il est en ligne.
</p><p>
Maintenant ça fonctionne :
<span style="display: inline-block; width: 120px; height: 40px; background: #0ea5e9; color: #fff; text-align: center; line-height: 40px;">inline-block</span>
</p>display: inline-block combine les deux mondes : l’élément reste en ligne, mais respecte les dimensions comme un bloc.
Bonnes pratiques
#- Vérifiez toujours d’abord qu’un élément sémantique ne convient pas, par ex.
<section>,<nav>ou<strong>. - N’imbriquez pas d’éléments de bloc, y compris
<div>, dans<span>. - Empiler des
<div>les uns dans les autres ("divite") complique la lecture du code. Chacun devrait avoir un rôle précis.
Entrées associées
#- <div>Un conteneur de bloc générique sans signification, pour grouper des éléments et les styliser.
- <span>Un conteneur en ligne générique sans signification, pour styliser un fragment de texte.
- <section>Une partie thématique d’un document, généralement avec son propre titre.
- <article>Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
- <strong>Un texte de grande importance : un avertissement, une information clé.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.