### div

L'élément div (pour division) définit un conteneur pour d'autres éléments de groupe. div n'a aucune portée sémantique et doit être utilisé uniquement quand aucun élément de structure ou de groupement ne peut être utilisé à sa place.

Exemple : utilisation de div
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>DIV</title> <style> .remarque {margin-left: 5em; font-size: 0.8em} </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie erat sit amet elit vestibulum pharetra. Mauris a ligula fringilla, vulputate eros sit amet, facilisis lorem.</p> <div class="remarque"> <p>div n'a aucune portée sémantique et doit être utilisé uniquement quand aucun élément de structure ou de groupement ne peut être utilisé à sa place.</p> <p>Pour marquer le groupement, div sera souvent associé à une classe CSS qui fera une mise en forme spécifique.</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie erat sit amet elit vestibulum pharetra. Mauris a ligula fringilla, vulputate eros sit amet, facilisis lorem.</p> </body> </html>

L'élément div était très utilisé avant qu'HTML5 ne fournisse des éléments spécifiquement dédiés à la définition de structures (header, footer,main, section, article, nav et aside). Ces éléments doivent maintenant être privilégiés car ils apportent une signification précise aux blocs de la structure et permettent de simplifier le code.

Voilà un exemple de CE QU'IL NE FAUT PAS FAIRE avec div. On reprend ici l'exercice sur les structures et on le code avec div à la place des éléments corrects.

Exemple : mauvaise utilisation de div
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>A ne pas faire</title> <style> * {margin: 0; padding: 0.5em} .entete {background: #ed8683; margin-bottom: 1em} .contenu {background: #a9b9c5; margin-right: 8em;} .pied {background: #ffff66; height: 3em; margin-top: 1em} .adroite {background: #ff9900; float: right; width: 6em;} h1 {background: #a3a334; font-size: 1.5em} .nav {background: #74e8e5; margin-top: 0.5em} .section {background: #9ee46e; min-height:5em; margin: 0.5em 0} .section-adroite {min-height: 8.3em} h2 {background: #a3a334; font-size: 1.2em; padding: 0; margin-bottom: 0.5em;} .article {background: #e3e3e3; min-height:5em; margin: 0.5em 0} .entete-section {margin: 0 0 0.5em} .pied-section {height: 1em; clear: left} .agauche {min-height: 2em; margin: 0 0.5em 0.5em 0; float: left; background: #ff9900; width: 3em;} </style> </head> <body> <div class="entete"> <h1>Titre de la page</h1> <div class="nav">Barre de navigation</div> </div> <div class="adroite"> <div class="section section-adroite"> <h2>Titre</h2> </div> <div class="section section-adroite"> </div> <div class="section section-adroite"> <h2>Titre</h2> </div> </div> <div class="contenu"> <div class="section"> <div class="entete entete-section"> <h2>Titre section 1 </h2> En-tête section 1 . </div> <div class="agauche"></div> section 1 sans article <div class="pied pied-section"> Pied section 1 </div> </div> <div class="section"> <div class="article"> <h2>Titre article 1</h2> <div class="agauche"></div> article 1 de la section 2 </div> <div class="article"> <h2>Titre article 2</h2> <div class="agauche"></div> article 2 de la section 2 <div class="pied pied-section"> Pied article 2 </div> </div> </div> </div> <div class="pied"> Pied de page. </div> </body> </html>

Si le code permet d'obtenir le même résultat que celui qui utilise des balises de structure, on a les inconvénients suivants :

- on perd les informations données directement par les balises de structure header, footer, etc),
- l'utilisation de classes CSS (`.contenu`, `.pied`, etc) complexifie le code HTML car par exemple à la place de `<footer>` on aura `<div class="pied pied-section">`