<div>

La balise <div> est une balise conteneur généralement utilisée pour regrouper des blocs de contenu en HTML.

Elle ne fournit aucun style par défaut, mais est très utile pour structurer une page et appliquer des styles CSS ou des comportements avec JavaScript.

Structure et syntaxe de la balise <div>

Structure et syntaxe de base

Voici la syntaxe de base d'une balise <div> :

<div>
  Les éléments sont placés ici...
</div>

Exemple d'utilisation

Voici un exemple typique :

<div>
  <p>Paragraphe de texte dans un conteneur</p>
  <ul>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
  </ul>
</div>

Dans cet exemple, la balise <div> regroupe un paragraphe et une liste non ordonnée (<ul>).

Attributs

La balise <div> accepte les attributs HTML standards comme :

• class : pour appliquer des styles CSS par une classe ;
• id : pour identifier un conteneur unique ;
• style : pour appliquer des styles à la volée.

Bonnes pratiques

Plusieurs bonnes pratiques sont à garder en mémoire quand vous utilisez la balise <div> ! 😉

Pour commencer, utilisez-là principalement pour structurer votre mise en page de manière logique et hiérarchique : pensez à diviser vos sections de manière claire pour permettre une meilleure lecture et maintenance de votre code.

Ensuite, privilégiez des balises sémantiques comme <header>, <main>, ou <article> lorsque cela est pertinent, afin d'améliorer l'accessibilité et le référencement (SEO) pour votre page.

Les moteurs de recherche ont plus de facilité à comprendre votre page grâce aux balises spécifiques, donc évitez de tout structurer avec vos balises <div>.

Enfin, n'abusez pas des balises <div>. Préférez utiliser des balises sémantiques comme <section> pour des groupes logiques de contenu, ou <span> pour des styles inline.

Différence avec d'autres balises similaires

• <span> : La balise <span> est similaire à <div>, mais elle est utilisée pour des éléments inline contrairement aux éléments de type bloc avec <div>.
• <section> : Contrairement à <div>, <section> apporte une sémantique claire pour définir des parties d'un document.

Compatibilité des navigateurs

La balise <div> est compatible avec tous les navigateurs modernes.