Définition de la balise HTML div
L’élément div est un conteneur générique. Cela signifie qu’il ne possède aucune sémantique mais est utilisé uniquement pour organiser du contenu.
Le fait que l’élément div ne possède aucun « sens » en fait un élément qui va à l’encontre du rôle du HTML dont le but est justement de donner du sens aux contenus.
On limitera donc l’utilisation de l’élément div aux cas où il n’existe aucun autre élément sémantique qui peut s’y substituer (comme un élément nav pour un menu de navigation par exemple).
En pratique, on utilisera souvent l’élément div à des fins de mise en forme en CSS. En effet, on voudra souvent grouper des éléments qui ne possèdent pas forcément de lien logique / sémantique ensemble afin de leur appliquer la même mise en forme ou de les positionner les uns par rapport aux autres ou par rapport aux autres éléments de la page.
Ne pas confondre : l’élément span est également un conteneur générique mais il existe des différences d’utilisation entre les éléments div et span. Cela provient du fait que l’élément div est un conteneur de niveau bloc tandis que l’élément span est un conteneur en ligne (inline) et va donc plutôt être utilisé pour contenir des bouts de texte.
Attributs de l’élément div
L’élément div ne possède pas d’attribut particulier. Il supporte les attributs universels comme l’ensemble des éléments HTML.
Pour rappel, les attributs universels sont des attributs qui peuvent être ajoutés à tous les éléments HTML. Quelques exemples d’attributs universels communs : class, id, lang, style, title…
Exemples d’utilisation de div
dans l’exemple ci-dessous, on utilise l’élément div pour styliser un ensemble d’éléments qui servent de cadre d’introduction pour une page.
See the Pen
Balise HTML div by Pierre (@pierregiraud)
on CodePen.
Compatibilité navigateurs
Ces informations sont tirées du site caniuse.com. Les cases vertes indiquent que le navigateur supporte l’élément. Les cases grises indiquent que le support est inconnu. Les cases rouges indiquent que l’élément n’est pas supporté. Le chiffre dans chaque case correspond à la version du navigateur concernée.
Extraits de la documentation officielle
Ces informations sont extraites de la spécification officielle (W3C)
