Tag HTML <div>

❮ Précédent Suivant ❯

Le tag <div> est un élément de bloc, qui spécifie les domains ou les parties de document HTML. Il n’a aucun effet sur le contenu ou la mise en page et permet de regrouper des éléments HTML pour être stylisés avec CSS ou manipulés avec des scripts.

Nous vous recommandons d’utiliser le tag <div> uniquement lorsque aucun autre élément sémantique est introduit en HTML5 (tel que <nav>, <main> ou <article>) n’est approprié.

Le tag <div> est un élément de niveau bloc, donc un saut de ligne est placé avant et après.

Vous pouvez placer n’importe quel élément HTML dans le tag <div>, y compris un autre <div>.

Le tag <div> ne peut pas être dans le tag <p>, car le paragraphe sera brisé au point où le tag <div> est saisi.

Pour appliquer les styles dans à l'intérieur de paragraphe, utilisez le tag <span>, qui est utilisé avec les éléments en ligne.

Syntaxe

Le tag <div> est apparié. Le contenu doit être écrit entre les tags ouvrant (<div>) et fermant (</div>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Le tag &lt;div&gt;</title>
  </head>
  <body>
    <h1> Le tag &lt;div&gt; </h1>
    <div style="background-color:#8ebf42">
      <p>On utilise le tag &lt;div&gt; pour regrouper deux paragraphes pour appliquer un arrière-plan au texte et ajouter de la couleur à celui-ci.        <span style="color:#1c87c9">word</span> on le place dans le tag &lt;span&gt;.</p>
      <p>Notez que le &lt;div&gt; tag est un élément de niveau de bloc, donc un saut de ligne est placé avant et après.
        it.
      </p>
    </div>
  </body>
</html>

Essayez-vous-même!

Résultat

Blocs de positionnement définis par le tag <div>

Lorsqu'on construit les mises en page, on traite plusieurs blocs définis par le tag <div> . Le positionnement de ses blocs est au coeur de la mise en page: placer les éléments dans les positions relatives correctes sur toutes les tailles d’écran l’une des tâches les plus importantes.

Selon le contenu et les objectifs de la page, on peut utiliser différentes techniques (ou leurs combinaisons) pour déterminer la place de chaque bloc. En savoir plus sur ces techniques.

Flexbox

Dans les sites Web modernes, les mises en page float-based sont remplacées avec Flexbox. L’idée principale de Flexbox est que vous pouvez contrôler l’alignement, la direction, l’ordre et la taille des éléments dans le conteneur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
      display: flex;
      align-items: center; /* Utilisez d’autres valeurs pour voir le résultat */
      width: 90%;
      height: 300px;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 25%;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Résultat

Lisez notre Guide de Flexbox pour apprendre à créer les mises en page flexibles optimisés pour plusieurs appareils.

Propriété CSS Float

La propriété CSS float, ou “floats” permet aux éléments d'apparaître les uns à côté des autres ou séparément les uns des autres, ce qui nous permet de créer différents types de dispositions, y compris des pages multi-colonnes, des barres latérales, des grilles, etc.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .content {
      overflow: auto;
      border: 3px solid #666666;
      }
      .content div {
      padding: 10px;
      }
      .content a {
      color: bleu foncé;
      }
      .blue {
      float: droite;
      width: 45%;
      background: #1c87c9;
      }
      .vert {
      float: gauche;
      width: 35%;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>C’est quelque paragraphe dans le tag div.</p>
        <a href="#">C’est quelque hyperlien dans le tag div.</a>
        <ul>
          <li>Élément 1</li>
          <li>Élément 2</li>
        </ul>
      </div>
      <div class="green">
        <p>C’est quelque paragraphe dans le tag div</p>
        <ol>
          <li>Élément 1</li>
          <li>Élément 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Résultat

Marges Négatives

Les marges négatives peuvent être appliquées aux éléments statiques ou flottants.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .content div {
      padding: 2%;
      }
      .content a {
      color: bleu foncé;
      }
      .main-content {
      width: 30%;
      margin-left: 32%;
      }
      .bleu {
      width: 25%;
      margin-top: -10%;
      background: #1c87c9;
      }
      .vert {
      width: 20%;
      margin: -35% auto auto 70%;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="main-content">
        <a href="#">C’est quelque hyperlien dans le tag div.</a>
      </div>
      <div class="blue">
        <p>C’est quelque paragraphe dans le tag div.</p>
        <a href="#">C’est quelque hyperlien dans le tag div.</a>
        <ul>
          <li>Élément 1</li>
          <li>Élément 2</li>
        </ul>
      </div>
      <div class="green">
        <p>C’est quelque paragraphe dans le tag div.</p>
        <ol>
          <li>Élément 1</li>
          <li>Élément 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Résultat

Voyez la collection de Modèles de mise en page HTML créés à l’aide de flottants CSS et de marges négatives.

Positionnement relatif+absolu

Si vous voulez positionner le div par rapport à un élément particulier, vous pouvez utiliser une combinaison de position: relative et position: absolute.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .content { position: relative; height: 400px; border: 1px solid #666666;}
      .content div { position: absolute; width: 35%; padding: 10px; }
      .blue { right: 20px; bottom: 0; background: #1c87c9; }
      .green { top: 10px; left: 15px; background: #8ebf42; }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>C’est quelque paragraphe dans le tag div.</p>
      </div>
      <div class="green">
        <p>C’est quelque paragraphe dans le tag.</p>
      </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Résultat

Remarque: la position: relative n’affecte pas le positionnement des éléments en flux normal sauf si vous ajoutez des décalages.

Attributs

Attribut	Valeur	Description
align	left right center justify	A été utilisé pour aligner le contenu dans le tag <div>.Aligner le contenu dans un tag <div>. Cet attribut n’est pas supporté en HTML5. La propriété CSS text-align est utilisé au lieu de celui-ci.

Le tag <div> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <div> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <div>:

La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
La propriété CSS font-size définit la taille de la police.
La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.

Coloration du texte dans le tag HTML <div>:

La propriété CSS color décrit la couleur du contenu et les décorations du texte.
La propriété CSS background-color définit la couleur de fond d’un élément.

Styles de mise en page du texte pour la tag HTML <div>:

La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
La propriété CSS word-break spécifie où les lignes doivent être cassées.

Autres propriétés utiles pour le tag HTML <div>:

La propriété CSS text-shadow ajoute des ombres au texte.
La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
La propriété CSS line-height spécifie la hauteur d’une ligne.
La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
La propriété CSS word-spacing permet de définir l’espacement entre les mots.

Tag HTML <div>

Syntaxe

Exemple

Résultat

Blocs de positionnement définis par le tag <div>

Flexbox

Exemple

Résultat

Propriété CSS Float

Exemple

Résultat

Marges Négatives

Exemple

Résultat

Positionnement relatif+absolu

Exemple

Résultat

Attributs

Comment styler le tag HTML <div> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <div>:

Coloration du texte dans le tag HTML <div>:

Styles de mise en page du texte pour la tag HTML <div>:

Autres propriétés utiles pour le tag HTML <div>:

Support de Navigateurs

Pratiquez vos connaissances