Aller au contenu

balises génériques <span> et <div>

Quand on crée une page web en HTML, il arrive qu’on ait besoin de grouper du contenu ou de modifier une partie précise de texte sans que cela change le sens du document. C’est exactement le rôle des balises génériques <div> et <span>.

<span> La balise en ligne (inline) générique

  • <span> est une balise en ligne (inline).
  • Elle n’occupe que la place de son contenu, sans retour à la ligne.
  • On l’utilise pour mettre en valeur une portion de texte dans un paragraphe ou un titre, par exemple pour changer sa couleur ou le mettre en gras.

Exemple :

Un paragraphe HTML avec une portion mise en évidence :

<p>J’adore le <span>HTML et CSS</span> !</p>

En CSS, on peut alors donner une couleur différente sur la portion entre l'ouverture et la fermeture du <span>:

p span {
  color: red;
  font-weight: bold;
}

👉 Ici, seuls les mots « HTML et CSS » sont affichés en rouge et en gras.

<div>Le conteneur bloc générique

  • <div> est une balise de type bloc.
  • Elle occupe toute la largeur disponible et commence toujours sur une nouvelle ligne.
  • On l’utilise pour regrouper plusieurs éléments (titres, paragraphes, images, etc.) afin de leur appliquer un style commun ou de créer une section logique.

Exemple :

Bloc HTML :

<div>
  <h2>Mon titre</h2>
  <p>Ceci est un paragraphe à l’intérieur d’un div.</p>
</div>

En CSS, on peut alors traiter le bloc au lieux de chaque enfant :

div {
  border: 0.1rem solid black;
  padding: 1rem;
  background-color: lightgray;
}

👉 Ici, tout le contenu du <div> est présenté comme un encadré avec une couleur de fond.

En résumé

Balise Type Quand l'utiliser ?
<span> En ligne (inline) Pour modifier l’apparence d’un petit bout de texte ou un élément précis à l’intérieur d’une phrase.
<div> Bloc Pour structurer et regrouper une portion de contenu qui comprend plus d'une balise.

À retenir :

  • <div> : organiser le contenu en grands blocs.
  • <span> : cibler un morceau de texte à l’intérieur d’une ligne.
  • Les deux n’ont pas de style par défaut : ils deviennent utiles surtout quand on les combine avec du CSS.