HTML
Élément div
Recherche…
Introduction
L'élément div dans HTML est un élément conteneur qui encapsule d'autres éléments et peut être utilisé pour regrouper et séparer des parties d'une page Web. Une div par elle-même ne représente en soi rien mais est un outil puissant dans la conception de sites Web. Ce sujet couvre le but et les applications de l'élément div.
Syntaxe
<div>example div</div>
Nidification
Il est courant de placer plusieurs <div> dans un autre <div> . Ceci est généralement appelé éléments "d'imbrication" et permet de diviser davantage les éléments en sous-sections ou d'aider les développeurs avec un style CSS.
Le <div class="outer-div"> est utilisé pour regrouper deux éléments <div class="inner-div"> ; chacun contenant un élément <p> .
<div class="outer-div">
<div class="inner-div">
<p>This is a paragraph</p>
</div>
<div class="inner-div">
<p>This is another paragraph</p>
</div>
</div>
Cela donnera le résultat suivant (styles CSS appliqués pour plus de clarté):
Imbrication d'éléments en ligne et de blocs Lors de l'imbrication d'éléments, vous devez garder à l'esprit qu'il existe des éléments en ligne et des blocs. tandis que les éléments de bloc "ajoutent un saut de ligne en arrière-plan", ce qui signifie que les autres éléments imbriqués sont affichés automatiquement dans la ligne suivante, les éléments en ligne peuvent être positionnés les uns à côté des autres par défaut
Évitez les imbrications <div> profondes
Un format de conteneur imbriqué profond et souvent utilisé montre un style de codage incorrect.
Les coins arrondis ou certaines fonctions similaires créent souvent un tel code HTML. Pour la plupart des navigateurs de dernière génération, il existe des contreparties CSS3. Essayez d'utiliser le moins possible d'éléments HTML pour augmenter le rapport entre le contenu et les balises et réduire le chargement de la page, ce qui se traduit par un meilleur classement dans les moteurs de recherche.
div section L'élément ne doit pas être plus imbriqué que 6 couches.
Utilisation de base
L'élément <div> n'a généralement aucune signification sémantique spécifique, représentant simplement une division, et est généralement utilisé pour regrouper et encapsuler d'autres éléments dans un document HTML et pour séparer ceux des autres groupes de contenu. En tant que tel, chaque <div> est mieux décrit par son contenu.
<div>
<p>Hello! This is a paragraph.</p>
</div>
L'élément div est généralement un élément de niveau bloc , ce qui signifie qu'il sépare un bloc d'un document HTML et occupe la largeur maximale de la page. Les navigateurs ont généralement la règle CSS par défaut suivante:
div {
display: block;
}
Le Consortium World Wide Web (W3C) encourage vivement l’élément div comme élément de dernier recours, lorsque aucun autre élément ne convient. L'utilisation d'éléments plus appropriés au lieu de l'élément div entraîne une meilleure accessibilité pour les lecteurs et une facilité de maintenance pour les auteurs.
Par exemple, un article de blog serait marqué en utilisant <article> , un chapitre utilisant <section> , des aides à la navigation d'une page utilisant <nav> et un groupe de contrôles de formulaire utilisant <fieldset> .
Les éléments div peuvent être utiles à des fins stylistiques ou pour envelopper plusieurs paragraphes dans une section qui doivent tous être annotés de manière similaire.