La « divite » : comment remédier à cette maladie qui nous rend fous ?

Souffrez-vous de « divite » aiguë ? Cette maladie qui touche uniquement les développeurs Front-End et qui rend fous les développeurs un peu trop tatillons. Nous allons décrypter cette maladie ensemble afin de déterminer si vous aussi, vous êtes atteint de « divite » aiguë sans le savoir…

C'est grave docteur ?

Au fait, la « divite » c'est quoi ? En développement web, l'une des premières choses que l'on apprend c'est à afficher un rendu de code contenu dans une balise <div>. On se dit que ça marche et que cette simple balise suffira amplement pour assurer le positionnement de nos pages web. Oui, vous avez raison, mais vous avez 5 ans de retard.  

Un peu d'histoire ne fait pas de mal

En 1989, Tim Bernard Lee, inventeur du World Wide Web, a aussi créé le HTTP, les adresses web et le HTML. Ce dernier permet d'afficher des documents sur un écran au travers d'un langage hypertexte. Grâce à ce langage, il est possible d'interagir avec le document via des liens permettant de naviguer vers d'autres documents. Le langage était bien différent de celui d'aujourd'hui mais le concept de structure en arbre, où un élément racine contient d'autres éléments, est resté.  

Êtes-vous atteint de « divite » ?

La « divite » fait référence à l'utilisation excessive de la balise <div> et sert aussi à décrire un code mal structuré souvent dû à l'emploi excessif de la <div>. Prenons un exemple de structure de page. Tout le code qui va suivre sera contenu dans la balise <body>.

<div id="header"></div>

<div id="main">

<div id="sidebar"></div>

<div id="container"></div>

</div>

<div id="footer"></div>

  A première vue, pas de quoi s'alarmer. Il n'y a pas beaucoup de <div> et les id précisent bien le contenu que va renfermer chaque <div>. Sauf que :

  1. Le code n'est pas sémantique. Les balises <div> n'indiquent pas ce qu'elles font, autant pour le navigateur que pour le développeur.
  2. Les id sont à proscrire. Ils sont là pour donner un contexte à nos balises <div> qui elles, n'en n'ont pas. Or, dans ce cas, ce n'est pas aux id de fournir un contexte.

Reprenons notre exemple de structure en y ajoutant le contenu :

<div id="header">

<div class="header">Blog du super développeur</div>

<div class="navigation">

<ul>

<li><a href="/">Accueil</a></li>

<li><a href="/archive">Archive</a></li>

<li><a href="/about">A propos</a></li>

</ul>

</div>

</div>

<div id="main">

<div id="sidebar">

<div class="list-months">

<ul>

<li><a href="/posts/03-19">Mars 2019</a></li>

<li><a href="/posts/02-19">Février 2019</a></li>

<li><a href="/posts/01-19">Janvier 2019</a></li>

</ul>

</div>

</div>

<div id="container">

<div class="article">

<div class="header header-1">

Apprendre le HTML

</div>

<div class="content">

<div class="header-2">

Partie 1: Les divs, c'est trop cool

</div>

<p>

<!-- Contenu 1 -->

</p>

<div class="header-2">

Partie 2: La mise en page en float

</div>

<p>

<!-- Contenu 2 -->

</p>

</div>

</div>

<!-- Autre articles -->

</div>

</div>

<div id="footer">

Contactez moi!

<div class="contact">

<div class="email">

<a href="mailto:[email protected]">[email protected]</a>

</div>

<div class="street-address">

<p>123 Rue Sésame</p>

<p>99000</p>

<p>TrouVille</p>

<p>France</p>

</div>

</div>

</div>

  Oula, ça fait mal aux yeux … Je vous avoue que je me suis un peu perdu dans ce code. Et encore, je l'ai simplifié. Vous commencez à vous rendre compte que l'imbrication de <div> tous azimuts ne permet pas une lecture optimale du code. Heureusement, grâce au HTML5, nous allons pouvoir rendre ça plus lisible pour vous et pour le navigateur.  

Les grandes lignes du HTML5

Au départ, l'idée principale du HTML5 était de fournir une couche applicative à travers une API (Canvas, Socket, RTC, …) ainsi qu'un remaniement des balises et attributs HTML. C'est cette deuxième partie qui nous intéresse. HTML5 introduit la notion de sémantique. Ce qui signifie que l'on va donner du sens aux éléments que l'on crée afin de le rendre significatif et compréhensible pour les navigateurs (et pour les développeurs également). “Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.” - W3C

Les balises

Commençons par les 3 balises que l'on retrouve le plus souvent dans la structure d'une page à savoir le header, main et footer.

<header>

Le header et le footer, sont des éléments très proches l'un de l'autre mais opposés par leur sémantique. Les deux servent pour les formulaires, les articles, les posts, ainsi que le layout d'un site web. Très souvent dans la balise header, on trouve un élément d'en-tête (<h1> à <h6>) lié à son contexte. Reprenons notre exemple avec uniquement le code à modifier.

<div id="header">

<div class="header">Blog du super développeur</div>

<div class="navigation">

<ul>

<li><a href="/">Accueil</a></li>

<li><a href="/archive">Archive</a></li>

<li><a href="/about">A propos</a></li>

</ul>

</div>

</div>


Il s'agit de transformer les <div> porteuses de « divite » excessive pour les remplacer par du HTML5.

<header>

<h1>Blog du super développeur</h1>

<div class="navigation">

<ul>

<li><a href="/">Accueil</a></li>

<li><a href="/archive">Archive</a></li>

<li><a href="/about">A propos</a></li>

</ul>

</div>

</header>

  A première vue, toutes les <div> n'ont pas été remplacées (on verra ça un peu plus tard). Actuellement, nous n’avons vu que la balise header et avec elle la balise <h*>, qui sont souvent liées. Dans notre cas, il s'agit du titre du site et par conséquent le super titre de notre site. Cela mérite bien un <h1>.  

<footer>

Le footer reprend les mêmes bases que le header, nous verrons uniquement la transformation de notre code.

<div id="footer">

Contactez moi!

<div class="contact">

...

</div>

</div>

  Et en HTML5, ça donne :

<footer>

Contactez moi!

<div class="contact">

...

</div>

</footer>

Mise à part notre balise footer, rien ne change. Ah si ! Vous pouvez retirer les id au passage. Notre sémantique étant bien en place, on peut mieux cibler en CSS les éléments que l'on souhaite. Attention : il s'agit uniquement d'un exemple. Dans un vrai contexte, il vaut mieux ajouter des class (et non des id), afin de bien organiser votre CSS.  

<main>

La balise main a un rôle plus global. Elle fait référence à la zone de contenu principale, par conséquent il n'y en a qu'une sur la page affichée.

<div id="main">

<div id="sidebar">

...

</div>

<div id="container">

...

</div>

</div>

La <div> qui englobe les autres divs est, dans notre contexte, la zone de contenu principale.

<main>

<div id="sidebar">

...

</div>

<div id="container">

...

</div>

</main>

 

<article>

En HTML5, la balise article représente un élément qui indique explicitement au navigateur que son contenu doit être pris en considération comme étant un élément important du site ou de la page affichée. Généralement, on peut associer un heading <h*> ou une balise header afin de bien identifier son contenu comme sémantique. <div class="article"> <div class="header header-1"> Apprendre le HTML

</div>

<div class="content">

<div class="header-2">

Partie 1: Les divs, c'est trop cool

</div>

<p>

<!-- Contenu 1 -->

</p>

<div class="header-2">

Partie 2: La mise en page en float

</div>

<p>

<!-- Contenu 2 -->

</p>

</div>

</div>

<!-- Autre articles -->

Cette partie est volontairement compliquée afin de bien comprendre la sémantique HTML5.

<article>

<header>

<h1>Apprendre le HTML</h1>

</header>

<div class="content">

<h2>Partie 1: Les divs, c'est trop cool</h2>

<p><!-- Contenu 1 --></p>

<h2>Partie 2: La mise en page en float</h2>

<p><!-- Contenu 2 --></p>

</div>

</article>

<!-- Autre articles -->

J'en profite au passage pour minifier un peu le code. Vous remarquerez que je n'ai pas supprimé la <div> avec la class content. Le but n'est pas d'éradiquer les divs mais de rendre le code plus compréhensible. Nous irons un peu plus loin dans la sémantique avec la balise section. On peut encapsuler le titre de notre article dans une balise header (je vous le conseille vivement) cela permettra au navigateur de bien séparer et identifier votre code.  

<section>

La balise section est un élément générique qui représente une section de votre site ou de votre page. Attention à ne pas confondre avec la <div>, ce serait trop facile. Chaque section doit être identifiée sémantiquement en incluant une heading <h*>. Notez également qu'une section peut s'imbriquer dans une balise article et inversement.

<div id="container">

<article>

<header>

<h1>Apprendre le HTML</h1>

</header>

<div class="content">

<h2>Partie 1: Les divs, c'est trop cool</h2>

<p><!-- Contenu 1 --></p>

<h2>Partie 2: La mise en page en float</h2>

<p><!-- Contenu 2 --></p>

</div>

</article>

<!-- Autre articles -->

</div>

  Voici le résultat en HTML5.

<section>

<article>

<header>

<h2>Apprendre le HTML</h1>

</header>

<section>

<h3>Partie 1: Les divs, c'est trop cool</h3>

<p><!-- Contenu 1 --></p>

<h3>Partie 2: La mise en page en float</h3>

<p><!-- Contenu 2 --></p>

</section>

</article>

<!-- Autre articles -->

</section>

Et boum ! Nos divs avec l'id "container" et la class "content" ont disparu. Encore une fois, je simplifie à l'extrême ; pensez à ajouter des classes CSS auquel cas vous pourriez être vite débordé. Vous pouvez encapsuler des balises section entre elles, à condition de bien respecter la sémantique.  

<nav>

La balise nav permet au navigateur d'interpréter les liens vers les autres pages du site (ou de l'application). Cet élément représente une liste d'items que l'on peut utiliser dans un header ou un footer. En tant que représentation de listes d'items, celui-ci ne se substitue pas à la balise <ul>, <ol>ou <dl>, qui représentent le vrai conteneur de listes d'items.

<div class="navigation">

<ul>

<li><a href="/">Accueil</a></li>

<li><a href="/archive">Archive</a></li>

<li><a href="/about">A propos</a></li>

</ul>

</div>

  En HTML5, la conversion est très simple.

<nav>

<ul>

<li><a href="/">Accueil</a></li>

<li><a href="/archive">Archive</a></li>

<li><a href="/about">A propos</a></li>

</ul>

</nav>

 

<aside>

La balise aside sert à donner des informations annexes relatives au contenu de la page. On peut le trouver dans des balises section et article. On dit qu'elle est complémentaire, mais pas nécessaire pour le bon fonctionnement de la page affichée. Notre exemple porte sur la liste des articles regroupés par mois.

<div id="sidebar">

<div class="list-months">

<ul>

<li><a href="/posts/03-19">Mars 2019</a></li>

<li><a href="/posts/02-19">Février 2019</a></li>

<li><a href="/posts/01-19">Janvier 2019</a></li>

</ul>

</div>

</div>

  En passant en HTML5 :

<aside>

<nav class="list-months">

<ul>

<li><a href="/posts/03-19">Mars 2019</a></li>

<li><a href="/posts/02-19">Février 2019</a></li>

<li><a href="/posts/01-19">Janvier 2019</a></li>

</ul>

</nav>

</aside>

Nous en profitons également pour convertir le conteneur de liste avec une nav. On considère très souvent que la sidebar d'un site ou d'une application web est l'équivalent du aside en HTML5.  

<address>

<footer>

Contactez moi!

<div class="contact">

<div class="email">

<a href="mailto:[email protected]">[email protected]</a>

</div>

<div class="street-address">

<p>123 Rue Sésame</p>

<p>99000</p>

<p>TrouVille</p>

<p>France</p>

</div>

</div>

</footer>


En HTML5, ça donne quelque chose de plus étoffé :

<footer>

<header>

<h2>Contactez moi!</h2>

</header>

<section class="contact">

<address property="email">

<a href="mailto:[email protected]">[email protected]</a>

</address>

<adress property="address" typeof="PostalAddress">

<p property="streetAddress">123 Rue Sésame</p>

<p property="postalCode">99000</p>

<p property="addressLocality">TrouVille</p>

<p property="addressCountry">France</p>

</address>

</section>

</footer>

Les attributs property sont écrits en RDFa, un vocabulaire utilisé par Schema.org  qui a pour but de créer et de maintenir des data structurées et compréhensibles par les navigateurs afin de mieux référencer la page visitée. On remarquera également, que Contactez moi ! est dans une balise <h2>, elle-même encapsulée dans un <header>. Eh oui, on a le droit de mettre un <header> dans un <footer>.  

Diagnostic

Voici le code final attendu :

<header>

<h1>Blog du super développeur</h1>

<nav>

<ul>

<li><a href="/">Accueil</a></li>

<li><a href="/archive">Archive</a></li>

<li><a href="/about">A propos</a></li>

</ul>

</nav>

</header>

<main>

<aside>

<nav class="list-months">

<ul>

<li><a href="/posts/03-19">Mars 2019</a></li>

<li><a href="/posts/02-19">Février 2019</a></li>

<li><a href="/posts/01-19">Janvier 2019</a></li>

</ul>

</nav>

</aside>

<section>

<article>

<header>

<h2>Apprendre le HTML</h2>

</header>

<section>

<h3>Partie 1: Les divs, c'est trop cool</h3>

<p><!-- Contenu 1 --></p>

<h3>Partie 2: La mise en page en float</h3>

<p><!-- Contenu 2 --></p>

</section>

</article>

<!-- Autre articles -->

</section>

</main>

<footer>

<header>

<h2>Contactez moi!</h2>

</header>

<section class="contact">

<address property="email">

<a href="mailto:[email protected]">[email protected]</a>

</address>

<adress property="address" typeof="PostalAddress">

<p property="streetAddress">123 Rue Sésame</p>

<p property="postalCode">99000</p>

<p property="addressLocality">TrouVille</p>

<p property="addressCountry">France</p>

</address>

</section>

</footer>

Avouez que c'est quand même plus lisible qu'au début. Même s'il manque l'ajout de classes CSS afin de mieux cibler nos balises pour les styliser, on trouve en ce code, un aspect plus moderne du web. Sachez que cet article est donné à titre d'exemple et ne s'appliquera pas à tous les contextes. Il a pour but de vous faire prendre conscience de l'abus de <div> dans les codes qui nous entourent. Il est possible de faire beaucoup mieux et de respecter les standards W3C afin que le projet sur lequel vous travaillez soit plus agréable à parcourir et plus compréhensible pour l'ensemble des intervenants.  

Article inspiré de Stop using so many divs! An intro to semantic HTML