Qu'est-ce que la balise en HTML et comment l'utiliser ?

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.

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.

À 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 div-html_exemple1 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 div-html_exemple2 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.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.