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

Aller à :
  1. Attributs
  2. Notes d'utilisation
  3. Exemples
  4. Spécifications
  5. Compatibilité des navigateurs
  6. Voir aussi

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é.

Catégories de contenu Contenu de flux, contenu tangible.
Contenu autorisé Contenu de flux. Selon le WHATWG, si l'élément parent est un élément <dl>, un ou plusieurs éléments <dt> suivis par un ou plusieurs élément <dd> éventuellement entrecoupés par des éléments <script> ou <template>.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte un contenu de flux. Selon le WHATWG, un élément <dl>.
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLDivElement

Attributs

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

Note : L'attribut align est désormais obsolète et ne doit plus être appliqué pour un <div>. On privilégiera l'utilisation des propriétés et outils CSS (tels que la grille CSS ou les boîtes flexibles (flexbox)) pour aligner et positionner des éléments <div>.

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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<div>' dans cette spécification.		 Standard évolutif Aucune modification depuis la dernière dérivation.
HTML5
La définition de '<div>' dans cette spécification.		 Recommendation L'attribut align est désormais considéré obsolète.
HTML 4.01 Specification
La définition de '<div>' dans cette spécification.		 Recommendation  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
align
ObsolèteNon-standard
Chrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, marie-ototoi, tregagnon, teoli, dhar
Dernière mise à jour par : SphinxKnight,