La balise < div >, en HTML, est un conteneur d'éléments. L'ensemble des éléments renseignés à l'intérieur des balises HTML < div > < /div > constitue une section à laquelle appliquer une mise en forme spécifique décrite avec du code CSS. Identifier un div HTML à l'aide d'un attribut permet de le cibler avec CSS, pour appliquer systématiquement la mise en forme correspondante. Le conteneur d'éléments permet ainsi de structurer plus facilement la page web.

>> Téléchargez ce guide et découvrez les bases des langages HTML et CSS Pour afficher tous les paragraphes « À retenir » en gras, par exemple, il suffit d'ajouter le même div HTML à chaque paragraphe « À retenir » puis d'attribuer au div la propriété correspondante dans le code CSS.


 

C'est quoi, la balise HTML div ?

La balise HTML div, pour « division », est un élément de bloc qui a vocation à contenir d'autres éléments : un div HTML regroupe du contenu à l'intérieur de ses balises < div > < /div >.

  • Le div HTML est un conteneur générique : sa fonction est structurante, il n'a aucune valeur sémantique. Concrètement : les balises sémantiques < footer > et < h1 >, par exemple, indiquent respectivement au navigateur d'afficher le contenu sous forme de pied-de-page et de titre de niveau 1 ; la balise HTML div n'indique rien, à moins de lui attribuer des propriétés CSS destinées à styliser ce qu'elle contient.
  • En tant que conteneur de type bloc, le div HTML regroupe plusieurs éléments. Il se différencie ainsi du conteneur span de type « inline ». Comme le div, le span est un élément générique. Mais à la différence du div HTML, le span est un conteneur interne, inséré dans une ligne de code, qui ne contient qu'un élément. Illustration : pour mettre une expression en gras dans un paragraphe, il faut ajouter la balise span avant et après l'expression ; si tout le paragraphe doit être affiché en gras, il faut insérer le paragraphe dans un conteneur div.
  • L'élément HTML div produit un effet visuel à condition de lui attribuer des propriétés CSS. Si le navigateur doit appliquer plusieurs fois des mises en forme distinctes, il faut utiliser des attributs, class ou id par exemple, pour identifier clairement chaque mise en forme. Exemple : la page web doit afficher deux encarts et trois paragraphes de texte en rouge souligné ; il faut créer un div HTML « encart » à insérer deux fois, et un div HTML « rouge souligné » à insérer trois fois.

Que sont les langages de programmation HTML et CSS ?

Téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base de ces deux langages de programmation pour gérer votre site web.

À quoi sert la balise div ?

La balise div facilite et clarifie l'organisation du fichier HTML en le divisant en plusieurs sections. Les différentes sections y apparaissent de manière distinctive, la lisibilité du code est ainsi améliorée : le développeur s'y retrouve plus aisément.

Le cas échéant, l'élément sert également de marqueur : chaque fois que le conteneur paraît dans le code HTML, le navigateur applique à la section les propriétés CSS correspondantes. Pour déterminer plusieurs mises en forme, il faut utiliser des attributs : chaque attribut applique un style CSS spécifique. De cette manière, le contenu de la page web est structuré de manière cohérente et attractive. Côté développeur, le div HTML évite de multiplier les lignes de code : il suffit d'insérer le conteneur adéquat pour appliquer le style souhaité.

 

Comment utiliser les div en HTML ?

Le div HTML est inséré avec les balises : < div > < /div > ; la balise d'ouverture et la balise de fermeture sont obligatoires. À l'intérieur, il est possible d'inclure tous types d'éléments HTML : un paragraphe, un titre, un lien hypertexte, une liste, une image et même un autre div.

Pour appliquer un style CSS spécifique, il faut identifier le div HTML avec un attribut class ou id : < div class="" > < /div >. Ensuite, les propriétés sont renseignées dans le code CSS avec les valeurs souhaitées.

N'hésitez pas à vous servir d'un éditeur HTML pour vous aider dans la réécriture du code de votre site. Nous vous proposons d'ailleurs une liste d'éditeurs HTML gratuits.

 

Exemple d'utilisation de la balise HTML div

Dans cet exemple, la page web contient une section réservée aux offres promotionnelles. Le titre et le texte de cette section doivent être mis en valeur dans un cadre, et affichés en gras. À cet effet est créé un div HTML identifié à l'aide de l'attribut class="promo". La balise < div class="promo" > est placée avant le titre < h1 > et la balise < /div > est placée à la fin du paragraphe de texte promotionnel. Le code CSS indique les propriétés border et font-weight du div .promo.

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

Chaque fois qu'un nouvel élément est inséré dans les balises div "promo" du fichier HTML, il s'affiche en gras dans un encart.

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

De nombreuses propriétés CSS sont disponibles pour personnaliser l'apparence du contenu du div : font-family pour modifier la police du texte, color et background-color pour mettre de la couleur, text-align pour centrer du texte ou encore height pour dimensionner un encart. Le div HTML permet en outre de créer différents types de dispositions, avec des colonnes, des boîtes et des grilles par exemple.

Communauté HubSpot

 

Pour aller plus loin, téléchargez ce guide sur les langages de programmation HTML et CSS et découvrez les définitions, les différences et les éléments de code de base de ces deux langages de programmation pour gérer votre site web. Guide d'introduction aux langages HTML et CSS

Publication originale le Jun 16, 2022 3:21:00 AM, mise à jour le 20 juin 2022

Sujet(s):

HTML