<div>
Un conteneur de bloc générique sans signification, pour grouper des éléments et les styliser.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux
Exemple
#<div style="display: flex; gap: 12px; align-items: center;">
<div class="box">JS</div>
<div>
<strong>Formation JavaScript</strong><br>
<small>20 leçons · 6 heures d’apprentissage</small>
</div>
</div>Définition et utilisation
#L’élément <div> (de l’anglais division) est un conteneur de bloc générique. Il regroupe des éléments pour qu’on puisse les styliser ensemble, les disposer avec Flexbox ou Grid, ou les retrouver en JavaScript. Pour le navigateur, les lecteurs d’écran et les moteurs de recherche, il ne porte aucune signification.
Avant l’arrivée de HTML5, toutes les mises en page de sites étaient construites avec des éléments <div> et des classes comme header ou menu. Aujourd’hui, il existe des éléments sémantiques pour ces usages : <header>, <nav>, <main>, <article>, <section>, <aside> et <footer>. Une bonne règle : cherchez d’abord un élément qui décrit le contenu, et n’utilisez <div> que lorsqu’aucun ne convient.
<div> peut contenir n’importe quel contenu de flux. Il peut aussi servir à grouper des paires <dt> et <dd> dans une liste de définitions <dl>, par exemple pour les disposer en tuiles.
Ne transformez pas un <div> en bouton. Un <div> avec un attribut onclick n’est pas accessible au clavier, et un lecteur d’écran ne sait pas qu’on peut cliquer dessus. Pour une action, utilisez <button>.
Syntaxe
#<div>
…
</div>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<div class="stage" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JS</div>
<div class="box">React</div>
<div class="box">Python</div>
<div class="box">SQL</div>
</div><div class="header">
<div class="menu">…</div>
</div>
<header>
<nav>…</nav>
</header>Les deux extraits se ressemblent, mais le second indique au navigateur et aux lecteurs d’écran ce qu’est chaque partie de la page.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
div {
display: block;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Vérifiez d’abord qu’un élément sémantique ne convient pas, par exemple
<section>,<article>ou<nav>. - Ne créez pas de
<div>cliquables. Un bouton, c’est<button>, et un lien, c’est<a>. - Évitez les couches superflues. Chaque
<div>sans rôle précis complique la lecture du code et le stylisme.
Entrées associées
#- <div> vs <span><div> est un conteneur de bloc sans signification, et <span> son équivalent en ligne. Les deux servent seulement à grouper et styliser, jamais à décrire le contenu.
- <section> vs <article> vs <div><article> est un contenu autonome, <section> est une partie thématique d’un ensemble plus grand, et <div> est un conteneur neutre sans aucune signification.
- <span>Un conteneur en ligne générique sans signification, pour styliser un fragment de texte.
- <section>Une partie thématique d’un document, généralement avec son propre titre.
- <article>Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
- <main>Le contenu principal et unique de la page. Une seule instance visible par page.
- <p>Un paragraphe de texte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.