La balise `<div>`¶

La balise <div> est utilisée pour regrouper des éléments HTML à l'intérieur d'un même conteneur.

Lorsque le navigateur rencontre une balise <div> il crée un bloc générique permettant de regrouper plusieurs éléments afin de les organiser ou de leur appliquer des styles communs.
Contrairement aux balises structurantes comme <header>, <main> ou <section>, la balise <div> n'a aucune signification sémantique.
Elle est fréquemment utilisée avec les attributs class et id afin de faciliter l'application de règles CSS ou la manipulation par JavaScript.
La balise <div> est une balise de type block par défaut.
Parce qu'il s'agit d'un élément conteneur, une balise de fermeture </div> est nécessaire pour indiquer où le regroupement se termine.

Bonnes pratiques¶

Il est recommandé :

d'utiliser les balises structurantes (header, main, section, etc.) lorsqu'elles sont appropriées;
d'utiliser <div> lorsqu'aucune balise sémantique ne convient au besoin;
d'ajouter des classes ou des identifiants significatifs;
d'utiliser le CSS pour modifier l'apparence des conteneurs;
de conserver une structure simple et facile à comprendre.

SEO¶

La balise <div> n'a pas d'impact direct sur le référencement.

Comme elle ne fournit aucune information sur le rôle du contenu qu'elle contient, les moteurs de recherche accordent davantage d'importance aux balises sémantiques pour comprendre la structure d'une page Web.

Exemples¶

Conteneur pour du contenu¶

<div>
    <h2>Services</h2>
    <p>Description des services offerts.</p>
</div>

Regrouper plusieurs éléments¶

<div id="contenu">
    <img src="image.jpg" alt="Exemple">
    <p>Texte descriptif.</p>
    <a href="#">En savoir plus</a>
</div>

La balise <div>¶