<div> : l'élément de division du contenu

L'élément HTML <div> (qui signifie division du document) est un conteneur générique qui permet d'organiser le contenu sans représenter rien de particulier. Il peut être utilisé afin de grouper d'autres éléments pour leur appliquer un style (en utilisant les attributs class ou id) ou parce qu'ils partagent des attributs aux valeurs communes, tel que lang. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique (par exemple <article> ou <nav>) n'est approprié.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Attributs

Comme tous les autres éléments HTML, cet élément accepte les attributs universels.

Notes d'utilisation

L'élément <div> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple <article> ou <nav>).

Exemples

Un exemple simple

HTML

<div>
  <p>
     Tout type de contenu. Par exemple 
     &lt;p&gt;, &lt;table&gt;. À vous 
     de voir&nbsp;!
  </p>
</div> 

Résultat

Un exemple mis en forme

Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément <div>. On notera l'utilisation de l'attribut class sur l'élément <div>  afin d'appliquer la règle "shadowbox".

HTML

<div class="shadowbox">
  <p>Voici un paragraphe très intéressant inscrit
  dans une boîte avec une ombre.</p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les éléments dont la sémantique est liée au sectionnement du document :
  • <section>
  • <article>
  • <nav>
  • <header>
  • <footer>.
• <span> pour mettre en forme un contenu phrasé.