Élément HTML div : tout ce qu’il faut savoir sur le conteneur div

La balise div permet de diviser et de séparer les contenus en HTML. Comme le conteneur div n’a aucune signification sémantique propre, son utilisation n’est recommandée que lorsque d’autres éléments ne peuvent pas être utilisés.

Nom de domaine
Votre domaine en un clic
  • Domaine .eu ou .fr + éditeur de site gratuit pendant 6 mois
  • 1 certificat SSL Wildcard par contrat
  • Boîte email de 2 Go

Qu’est-ce qu’un conteneur div et à quoi sert-il ?

Pour se faire une idée de ce qu’est l’élément HTML div, il suffit de se pencher sur l’origine du terme. div vient du mot anglais division, c’est-à-dire « section », « division » ou encore « scission ». Un conteneur div sert principalement de conteneur pour d’autres éléments HTML. Il est certes possible de positionner des groupes et des zones, mais div n’a pas de signification sémantique propre en HTML. Son rôle principal est donc de créer et de délimiter des zones qui peuvent ensuite être formatées avec CSS. Le conteneur div n’a pas d’influence sur la mise en page ou le contenu d’un site Web.

C’est la raison pour laquelle div ne joue plus un rôle aussi important en HTML. Alors que l’élément HTML div était fréquemment utilisé dans les versions précédentes, son utilisation a été fortement limitée avec HTML5 et HTML 5.1. Ce n’est que lorsqu’aucun autre élément, comme article, aside, header, main, nav ou section, ne peut être utilisé que l’on doit recourir au conteneur div pour la construction. Il est donc recommandé, avant d’utiliser div en HTML, de chercher d’abord des solutions sémantiquement plus adaptées. En tant qu’élément de niveau block, le conteneur div est inséré dans un saut de ligne avant et après.

Comment utiliser div en HTML ?

div est principalement utilisé en HTML pour formater des éléments HTML avec CSS qui vont ensemble visuellement, pour regrouper différents blocs HTML et les positionner de manière claire ainsi que pour animer HTML, CSS et le contenu à l’aide de JavaScript. L’exemple suivant vous permet de voir comment un conteneur div sans attributs est construit :

<div>
<h2>Exemple de liste</h2>
<ul>
<li>Premier point de la liste</li>
<li>Deuxième point de la liste</li>
<li>Troisième point de la liste</li>
<li>Quatrième point de la liste</li>
</ul>
</div>

En principe, presque tous les contenus fluides peuvent être placés dans le conteneur div. En HTML, div n’a aucun effet sur l’affichage du contenu, il se contente de le délimiter.

Quels attributs le conteneur div prend-il en charge ?

En HTML, div ne prend en charge que les attributs globaux. La seule exception est align, qui n’est plus autorisé pour les conteneurs div depuis l’introduction de HTML5. Les attributs HTML les plus fréquemment utilisés pour div sont class et id. Voici deux exemples de conteneurs div avec attributs :

<div class="Exemple">
<h2>Voici un exemple de titre</h2>
<p>Vous pouvez insérer ici un exemple de texte délimité par le conteneur div.</p>
</div>

L’attribut id peut également être utilisé sans problème avec un conteneur div :

<div id="Exemple">
<ul>
<li><a href="index.html" title="Retour à la page d’accueil">Page d’accueil</a></li>
<li><a href="contact.html" title="Nous écrire">Contact</a></li>
<li><a href="about.html" title="À propos de nous">À propos</a></li>
</ul>
</div>

En résumé : l’élément HTML div appartient en grande partie au passé

Plusieurs raisons expliquent pourquoi div ne joue plus un grand rôle en HTML. Il ne s’agit pas tant des problèmes que pose un conteneur div, mais plutôt du fait que les balises HTML sémantiques structurent nettement mieux les données et facilitent ainsi beaucoup plus la maintenance. Les corrections au sein du document peuvent également être effectuées beaucoup plus rapidement grâce à d’autres objets tels que header, footer, article ou section. Si vous apprenez le HTML ou si vous apprenez le CSS, il est bon de connaître également div, mais il est recommandé d’utiliser des éléments sémantiquement plus appropriés.

Conseil

Vous savez mieux que quiconque à quoi doit ressembler votre propre site Web. Avec l’outil de création de sites Internet de IONOS, vous pouvez établir votre présence en ligne professionnelle en toute simplicité. Si vous avez besoin d’aide, nos experts se tiennent à votre disposition pour vous conseiller et vous aider.

Cet article vous a-t-il été utile ?