Chapitre 115 | Rôle du DIV

Rôle du <div> : diviser pour mieux organiser

Organisation spatiale :

Un <div> est utilisé pour délimiter des zones distinctes dans une page web. Il crée une séparation claire entre différentes parties du contenu.

Exemple :

<div>
  <h2>Section 1</h2>
  <p>Contenu de la première section.</p>
</div>
<div>
  <h2>Section 2</h2>
  <p>Contenu de la deuxième section.</p>
</div>

Ici, chaque <div> « divise » visuellement et logiquement le contenu.

Un corollaire : regrouper ce qui est divisé :

• Paradoxalement, en divisant le contenu, un <div> regroupe aussi les éléments qui appartiennent à une même logique ou fonctionnalité (titre, texte, images, etc.).On pourrait dire : « diviser pour mieux rassembler ».

Une page avec une section « À propos » et une section « Contact » :

<div id="about">
  <h2>À propos</h2>
  <p>Voici quelques informations sur nous.</p>
</div>
<div id="contact">
  <h2>Contact</h2>
  <p>Envoyez-nous un message !</p>
</div>

Ici, chaque <div> regroupe les éléments d’une section tout en divisant la page en parties fonctionnelles distinctes.

Semantiquement : diviser vs regrouper

Contrairement à des balises comme <header>, <main>, ou <section> qui portent une valeur sémantique explicite, <div> est neutre sémantiquement :

• Il n’indique pas directement une intention comme « navigation », « en-tête » ou « contenu principal ».
• Mais, il remplit toujours cette double fonction :
  • Diviser : segmenter la page en blocs.
  • Regrouper : contenir des éléments liés logiquement.

C’est pourquoi <div> est souvent utilisé avec des classes ou des IDs qui ajoutent du sens ou un rôle spécifique.

Résumé

Le <div> est un diviseur avant tout, conçu pour segmenter visuellement et logiquement une page. Par extension, il permet aussi de regrouper des éléments cohérents dans ces « divisions ».

Différence notoire avec d’autres balises

La balise <h2>

• Rôle principal : définir un titre ou un sous-titre de niveau 2 (le deuxième niveau après <h1>).
• Particularité : les balises <h1>, <h2>, etc., doivent être utilisées pour structurer votre document de manière hiérarchique.
• Restrictions :
  • Pas possible de mettre un <h2> dans un autre <h2>. Chaque balise titre est autonome (valable pour tous les <h>).

Veuillez noter qu’un titre principal et un sous-titre devrait être différencié. h1 h2 h3…

La balise <p>

• Rôle principal : créer des paragraphes de texte.
• Particularité : elle ne peut pas être imbriquée dans une autre balise <p>.

La balise <span>

• Rôle principal : styliser une portion de texte à l’intérieur d’autres balises.
• Particularité : c’est une balise en ligne (inline, pas un conteneur). Elle n’interrompt pas le flux du texte. (flux du texte : ce sera le sujet du prochain chapitre)

Résumé pragmatique

1. <div> : pour organiser et regrouper (conteneur). Peut tout contenir.
2. <h2> : pour les titres (pas d’imbrication dans d’autres titres).
3. <p> : pour les paragraphes (pas d’imbrication non plus).
4. <span> : pour styliser ou cibler une portion spécifique du texte.