Cours HTML / Quand utiliser div et span ?

div et span regroupent du contenu sans lui donner de signification particulière. Utilisez-les lorsque le CSS ou JavaScript a besoin d'une cible et qu'aucun élément HTML plus spécifique ne décrit le contenu. Un div regroupe généralement de plus grandes parties ; un span regroupe une partie d'une phrase.

En quoi div et span sont-ils différents ?

Un div peut contenir du contenu en flux comme des paragraphes, des listes ou une carte entière. Un span est destiné au contenu phrastique à l'intérieur d'une phrase. Aucun des deux n'indique que son contenu est un titre, un bouton ou particulièrement important. Par défaut, un div commence comme un bloc et un span reste en ligne, mais le CSS peut changer leur affichage. Choisissez en fonction de la structure du contenu, pas seulement de son apparence. Pour une région ayant un rôle de niveau page, choisissez d'abord un élément sémantique approprié dans Diviser une page avec des éléments sémantiques.

Ne mettez pas un paragraphe ou un div à l'intérieur d'un span. Si votre seul objectif est un saut de ligne, décidez d'abord si vous avez besoin d'un nouveau paragraphe ou d'un changement de mise en page CSS au lieu d'un autre conteneur.

Groupez uniquement ce qui a besoin d'être stylé

Mettez ce HTML dans un body d'un document et le CSS dans un élément style dans son head.

<div class="product-card">

  <h2>Tasse de voyage</h2>

  <p>Prix : <span class="price">15 $</span></p>

</div>

.product-card {

  padding: 16px;

  border: 1px solid #dadada;

}

.price {

  color: #075cb4;

  font-weight: 700;

}

Toute la carte obtient une bordure, tandis que seul le prix change de couleur et de graisse. L'attribut class donne au CSS un nom à sélectionner. Même sans CSS, le nom du produit reste un titre et le prix reste dans un paragraphe. Si le prix ne devient pas bleu, vérifiez que class="price" dans le HTML correspond à .price dans le CSS. Le point indique un sélecteur de classe ; il ne fait pas partie du nom de la classe HTML.

Privilégiez un élément avec un vrai sens

Pour la navigation principale, envisagez nav plutôt qu'un div générique. Pour un article indépendant, envisagez article. Pour une action que les utilisateurs peuvent activer, utilisez button au lieu de créer un span cliquable. L'élément natif correct transmet déjà du sens et fournit souvent un comportement clavier. Pour une action que les utilisateurs activent, distinguez les types de boutons décrits dans Utilisez textarea, select, option et button.

Le prix dans cet exemple n'a pas besoin de traitement spécial des données, donc span suffit. Vous pouvez conserver une classe CSS tout en changeant son élément pour un élément plus significatif plus tard. Consultez la liste des éléments HTML de MDN lors du choix d'un élément approprié.

Séparez le contenu autorisé de l'affichage CSS

Le contenu de flux est une catégorie utilisée pour le flux de contenu d'une page, y compris les paragraphes, les listes et les sections. Le contenu phrastique est utilisé à l'intérieur des passages de texte, tels que le texte, l'emphase, les liens et les images. div regroupe le contenu de flux ; span regroupe le contenu phrastique. Ces catégories sont différentes des règles CSS concernant l'occupation d'une ligne.

<!-- Non conforme : un paragraphe dans span -->
<span class="card"><p>Description du produit</p></span>

<!-- Un conteneur qui autorise le paragraphe -->
<div class="card"><p>Description du produit</p></div>

Écrire span { display: block; } ne rend pas un paragraphe valide à l'intérieur d'un span. Comparez les fragments séparément, puis conservez la même classe CSS sur l'enveloppe corrigée. Choisissez un élément du modèle de contenu plutôt que de changer les balises simplement pour cacher un problème visuel.

Référence de span sur MDN · Référence de div sur MDN

Erreurs courantes

Ne construisez pas chaque région de page uniquement en utilisant div pour faciliter le style de la mise en page. À l'inverse, ne donnez pas à un conteneur un élément sémantique dont le sens ne correspond pas. Un span stylé ne devient pas un titre ou un bouton simplement parce qu'il en a l'apparence. Commencez par le contenu et l'interaction, puis ajoutez des conteneurs génériques uniquement là où c'est nécessaire.