La balise HTML <div>
Apprenez à utiliser la balise <div> pour regrouper des éléments HTML et les styliser avec CSS. Exemples avec class, id, style et autres attributs.
La balise <div> est un conteneur utilisé pour définir une division ou une section. C'est un élément de type bloc qui n'affecte pas le contenu en lui-même, mais sert principalement à regrouper des éléments HTML afin de les styliser avec CSS ou de les manipuler avec des scripts.
Comme <div> est un élément de type bloc, chacun commence sur une nouvelle ligne et s'étend pour occuper toute la largeur disponible. Il ne porte aucune signification sémantique — c'est simplement une boîte générique. Utilisez <div> pour regrouper du contenu de type bloc ; pour regrouper ou styliser du contenu en ligne (quelques mots à l'intérieur d'une phrase), préférez son équivalent en ligne, la balise <span>.
Positionnement des blocs définis par la balise <div>
Comme <div> est un élément de type bloc, un saut de ligne est placé avant et après lui.
Il est possible de placer n'importe quel élément HTML à l'intérieur d'une balise <div>, y compris un autre <div>.
Les éléments de type bloc comme <div> ne peuvent pas être imbriqués dans des balises <p>, car le paragraphe sera interrompu à l'endroit où la balise <div> est placée.
Pour appliquer des styles à l'intérieur d'un paragraphe, utilisez la balise <span>, qui est employée avec les éléments en ligne.
Syntaxe
La balise <div> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<div>) et la balise fermante (</div>).
Exemple de la balise HTML <div> :
Exemple de la balise HTML <div>
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html><div> vs. éléments sémantiques
Un <div> est l'outil approprié lorsque vous avez seulement besoin d'une boîte générique pour y accrocher des styles ou des scripts. Mais lorsque cette boîte représente une région significative de la page — navigation, en-tête, article — préférez l'élément sémantique HTML5 correspondant. Les balises sémantiques décrivent ce qu'est le contenu, ce qui aide les moteurs de recherche, les lecteurs d'écran et les autres développeurs à comprendre votre balisage.
Comparez la même structure écrite de deux façons :
<!-- Before: generic divs, no meaning -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- After: semantic elements, self-describing -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Les deux s'affichent de manière identique par défaut, mais la seconde version est bien plus accessible et maintenable.
Méfiez-vous de la « soupe de divs ». Envelopper tout dans des éléments <div> imbriqués — <div class="nav">, <div class="header">, etc. — produit un balisage difficile à lire qui ne fournit aucune information utile aux technologies d'assistance. Avant d'ajouter un <div>, demandez-vous si <nav>, <header>, <main>, <article>, <section> ou <footer> convient mieux.
<div> vs. <span>
Les balises <div> et <span> sont toutes deux des conteneurs génériques sans signification propre — la différence réside dans le type de boîte qu'elles créent :
<div>est de type bloc. Il commence sur une nouvelle ligne, occupe toute la largeur disponible, et sert à regrouper des sections de contenu plus larges (paragraphes, listes, autres divs).<span>est en ligne. Il s'insère dans le flux d'un texte et sert à styliser ou cibler un petit morceau de contenu, comme un mot ou une expression.
<p>The word <span style="color:#1c87c9">highlighted</span> sits inside the text flow.</p>
<div style="background-color:#8ebf42">
<p>This whole block is grouped and given a background.</p>
</div>En règle générale : utilisez <div> pour regrouper du contenu de type bloc, et <span> pour envelopper du contenu en ligne.
Lorsque nous construisons des mises en page, nous manipulons plusieurs blocs définis par la balise <div>. Le positionnement de ces blocs est au cœur de la mise en page : placer les éléments aux bonnes positions relatives sur toutes les tailles d'écran est l'une des tâches les plus importantes.
Selon le contenu et les objectifs de la page, nous pouvons utiliser différentes techniques (ou leurs combinaisons) pour déterminer la place de chaque bloc. Pour les mises en page modernes, les deux outils à privilégier en premier sont CSS Grid (pour les mises en page bidimensionnelles en lignes et colonnes) et Flexbox (pour les lignes ou colonnes unidimensionnelles). Les techniques plus anciennes ci-dessous — flottants, marges négatives et positionnement absolu — fonctionnent encore mais sont rarement le meilleur choix aujourd'hui.
CSS Grid
CSS Grid est la méthode moderne et standard pour créer des mises en page bidimensionnelles — c'est-à-dire des mises en page qui organisent les blocs <div> en lignes et en colonnes simultanément. Vous définissez une grille sur le conteneur avec display: grid et décrivez ses pistes, puis les blocs enfants se placent dans les cellules.
Exemple de la balise HTML <div> avec CSS Grid :
Exemple de la balise HTML <div> avec CSS Grid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 10px;
background-color: #1faadb;
}
.grid-container > div {
height: 60px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Ce simple grid-template-columns: 1fr 1fr 1fr crée trois colonnes égales, et les six blocs <div> se répartissent automatiquement en deux lignes.
Flexbox
Lorsque vous avez uniquement besoin de disposer des éléments sur un seul axe — une ligne ou une colonne — Flexbox est l'outil approprié. Dans les sites web modernes, les mises en page basées sur les flottants sont remplacées par Flexbox et Grid. L'idée principale derrière Flexbox est qu'il permet de contrôler l'alignement, la direction, l'ordre et la taille des éléments à l'intérieur du conteneur.
Exemple de Flexbox avec la balise HTML <div> :
Exemple de la balise HTML <div> avec Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>La propriété CSS float
La propriété CSS float, ou « flottants », permet aux éléments d'apparaître côte à côte ou séparés les uns des autres, ce qui nous permet de créer différents types de mises en page, notamment des pages multi-colonnes, des barres latérales, des grilles, etc.
Exemple de la balise HTML <div> avec la propriété CSS float :
Exemple de la balise HTML <div> avec la propriété CSS float
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Résultat
Marges négatives (technique héritée)
Les marges négatives peuvent être appliquées aux éléments statiques et flottants pour rapprocher des blocs ou les faire se chevaucher.
Exemple de marges négatives :
Exemple de la balise HTML <div> avec des marges négatives
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Positionnement relatif + absolu
Si vous souhaitez positionner un div par rapport à un élément particulier, vous pouvez utiliser une combinaison de position: relative et position: absolute.
Exemple de positionnement relatif + absolu de la balise HTML <div> :
Exemple de la balise HTML <div> avec la propriété CSS position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>position: relative n'affecte pas le positionnement des éléments dans le flux normal, sauf si vous ajoutez des décalages.
Attributs
La balise <div> ne possède pas d'attributs qui lui sont propres. En pratique, elle s'appuie sur les attributs globaux — le plus souvent id, class, style, data-* et aria-* — pour être stylisée, scriptée ou rendue accessible. Elle prend également en charge les attributs d'événements.
| Attribut | Valeur | Description |
|---|---|---|
| align | left right center justify | Déprécié. Était utilisé pour aligner le contenu à l'intérieur d'une balise <div>. Non pris en charge en HTML5 — utilisez plutôt la propriété CSS text-align. |