Docs HTML exécutables : Balise div

Q: Comment mettre deux div côte à côte ?

Placez-les dans une div parente et donnez au parent display: flex. Les enfants se placent alors en ligne. Ajoutez gap pour les espacer et flex: 1 sur les enfants pour partager la largeur à parts égales.

Q: Faut-il utiliser div ou section ?

Utilisez , , , , ou quand le contenu a ce rôle, car les lecteurs d'écran et les moteurs de recherche les comprennent. Utilisez quand vous avez seulement besoin d'une boîte pour le style ou la mise en page.

Le rôle de la balise div

<div> (abréviation de division) est un conteneur générique. Elle regroupe des éléments pour que vous puissiez les styliser, les positionner ou les manipuler en script comme une seule unité. Seule, elle ne ressemble à rien : pas de marge, pas de bordure, pas de police particulière. C'est un élément bloc : elle commence sur une nouvelle ligne et s'étire sur toute la largeur disponible.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

Supprimez la ligne border du style et les div deviennent invisibles : c'est l'apparence par défaut d'une div. Tout son rendu visuel vient du CSS.

div class et id

Une div reçoit généralement une class, le nom que cible votre CSS. Les div qui partagent une classe partagent le style :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card stylise les deux boîtes, .card.highlight ajoute un contour bleu à la div qui possède les deux classes. Utilisez id quand vous devez désigner une div précise, par exemple comme cible de lien (href="#pro"). La page sur les attributs compare class et id en détail.

Des div côte à côte

Comme les div sont des blocs, elles s'empilent verticalement. Pour les aligner sur une ligne, faites de leur parent un conteneur flex :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

display: flex sur .row aligne les enfants, gap les espace, et les valeurs flex répartissent la largeur (1 : 2 : 1 ici). Ce schéma parent et enfants est l'usage le plus courant des div sur les vrais sites. Pour centrer une div, voir comment centrer une div.

Imbriquer des div

Une div peut contenir d'autres div, sur autant de niveaux que vous voulez. Chaque niveau est une boîte dans une boîte, ce que vous voyez en donnant à chaque div une bordure et un peu de padding :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

Gardez l'imbrication aussi plate que la mise en page le permet. Chaque conteneur en plus est une boîte de plus à comprendre quand une marge ou une largeur ne fait pas ce que vous attendez.

div ou balise sémantique ?

Une div ne dit rien de son contenu. HTML propose des balises qui font le même travail de regroupement et disent aussi ce qu'est le groupe :

Au lieu de	Utilisez	Pour
`<div class="header">`	`<header>`	L'introduction ou la barre du haut d'une page ou d'une section
`<div class="nav">`	`<nav>`	Un bloc de liens de navigation
`<div class="main">`	`<main>`	Le contenu principal, une fois par page
`<div class="post">`	`<article>`	Un élément autonome : article, commentaire, fiche produit
`<div class="footer">`	`<footer>`	Le pied d'une page ou d'une section

Ces balises ressemblent exactement à une div tant que vous ne les stylisez pas, mais les lecteurs d'écran les annoncent et permettent de passer de l'une à l'autre, et les moteurs de recherche lisent la structure. Utilisez une div pour les boîtes qui n'existent que pour la mise en page ou le style, comme le conteneur .row ci-dessus. La page sur le HTML sémantique présente l'ensemble.

Une div n'est pas un bouton

Une div avec un gestionnaire de clic semble cliquable à la souris, mais un utilisateur au clavier ne peut pas l'atteindre avec Tab ni l'activer avec Entrée, et un lecteur d'écran ne l'annonce pas comme un bouton :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

Utilisez <button> pour les actions et <a href> pour la navigation. Les deux sont focalisables et fonctionnent au clavier sans effort.

Erreurs fréquentes

Une div dans un <p>. Le paragraphe se ferme avant la div. Faites de la div l'élément extérieur, ou utilisez <span> dans le paragraphe.
La soupe de div. Une page faite uniquement de div n'a aucune structure pour les lecteurs d'écran. Remplacez les div par <header>, <nav>, <main> et <footer> là où ils conviennent.
Des div cliquables. Utilisez plutôt un <button> ou un lien.
S'attendre à ce qu'une div soit aussi large que son texte. Une div prend toute la largeur. Utilisez display: inline-block, width: fit-content ou un <span> si vous voulez qu'elle se réduise.
Réutiliser un id sur plusieurs div. Utilisez une classe pour tout ce qui se répète.

Questions fréquentes

Qu'est-ce qu'une div en HTML ?

<div> est un conteneur générique. Elle regroupe d'autres éléments pour que vous puissiez les styliser ou les positionner ensemble, et elle n'a aucune signification propre : les navigateurs l'affichent comme un bloc qui commence sur une nouvelle ligne et prend toute la largeur disponible.

Que signifie div class ?

<div class="card"> est une div avec un attribut class. La classe est un nom que le CSS utilise pour la styliser (.card { ... }) et que le JavaScript utilise pour la trouver. Plusieurs div peuvent partager une classe, et une div peut en avoir plusieurs : class="card featured".

Comment mettre deux div côte à côte ?

Placez-les dans une div parente et donnez au parent display: flex. Les enfants se placent alors en ligne. Ajoutez gap pour les espacer et flex: 1 sur les enfants pour partager la largeur à parts égales.

Faut-il utiliser div ou section ?

Utilisez <section>, <header>, <nav>, <main>, <article> ou <footer> quand le contenu a ce rôle, car les lecteurs d'écran et les moteurs de recherche les comprennent. Utilisez <div> quand vous avez seulement besoin d'une boîte pour le style ou la mise en page.

Peut-on mettre une div dans une balise p ?

Non. Un paragraphe ne peut contenir que du contenu inline. Le navigateur ferme le <p> dès qu'il rencontre <div>, ce qui casse vos styles. Utilisez une div comme élément extérieur ou un <span> dans le paragraphe.

Concepts liés