Balise HTML <dl>

Définition et utilisation

<div> Les balises définissent les divisions ou les parties (paragraphe ou section, division/section) des documents HTML.

<div> Les balises peuvent diviser les documents en parties indépendantes et différentes. Elles peuvent être utilisées comme outil d'organisation stricte et ne sont associées à aucun format.

Tous types de contenu peuvent être placés <div> intérieur des balises !<div> est utilisé comme conteneur d'éléments HTML, puis les styles CSS peuvent être définis ou les opérations peuvent être effectuées à l'aide de JavaScript.

Si id ou class est utilisé pour marquer <div>si class ou id Les attributs, peuvent facilement être <div> à la balise.

Remarque :Par défaut, les navigateurs appliquent toujours les styles <div> Placer un saut de ligne avant et après l'élément.

Utilisation

<div> C'est un élément en bloc. Cela signifie que son contenu commence automatiquement une nouvelle ligne. En réalité, le retour à la ligne est <div> a une présentation de formatage unique inhérente. Il est possible de <div> qui class ou id appliquer des styles supplémentaires.

Il n'est pas nécessaire de <div> Cependant, il y a aussi certains avantages à faire ainsi.

On peut ajouter la classe ou l'id à la même <div> Application de l'élément class ou id Les attributs, mais dans la plupart des cas, l'un d'eux est utilisé. La principale différence entre les deux est que class est utilisé pour un groupe d'éléments (éléments similaires ou éléments d'une catégorie), tandis que id est utilisé pour identifier un élément unique.

Voir également :

Tutoriel HTML :Éléments en bloc et en ligne HTML

Tutoriel HTML :Agencement HTML

Manuel de référence HTML DOM :Objet Div

Exemple

Partie du document où des styles CSS sont définis pour les éléments <div> :

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Ce texte est le titre contenu dans un élément div</h2>
  <p>Ce texte est contenu dans un élément div.</p>
</div>
</body>
</html>

Essayer vous-même

Cas d'utilisation

<body>
 <h1>Nouveau site</h1>
  <p>Un certain texte. Un certain texte. Un certain texte...</p>
  ...
 <div class="news">
  <h2>Titre d'actualité 1</h2>
  <p>Un certain texte. Un certain texte. Un certain texte...</p>
  ...
</div>
 <div class="news">
  <h2>Titre d'actualité 2</h2>
  <p>Un certain texte. Un certain texte. Un certain texte...</p>
  ...
 </div>
 ...
</body>

Explication de l'exemple

Comme vous le voyez, ce segment HTML simule la structure d'un site web d'actualités. Chaque div combine le titre et le résumé de chaque actualité, ce qui signifie que la div ajoute une structure supplémentaire au document. En plus de cela, étant donné que ces div appartiennent au même type d'éléments, elles peuvent être identifiées par class="news", ce qui non seulement ajoute une sémantique appropriée aux div, mais facilite également leur formatage ultérieur avec des styles, ce qui est un double avantage.

Astuce :Pour une étude plus approfondie de l'utilisation de class et id, veuillez lire le chapitre "Marquage structuré" de W3school, la section "div, id et autres assistants".

Attributs globaux

<div> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<div> Les balises prennent également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <div> Élément :

div {
  display: block;
}

Essayer vous-même

Compatibilité du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support