Pourquoi trop de <div> c'est mauvais ?

Bonjour,

Je suis en train de créer des pages avec une mise en page/forme entièrement CSS.

Je fais mon maximum pour garder un code léger mais j'ai énormément de <div> A part limiter le contenu de mes pages, je ne vois pas de solution pour limiter le nombre de div. A chaque petit bloc de contenu que j'ajoute, c'est div, div, div...

Ca reste clair et lisible quand-même, d'autant que j'ai mis des commentaires çà et là. Moi ça ne me pose aucun souci d'avoir beaucoup de div.

Mais alors pourquoi serait-il embêtant d'avoir beaucoup de balises <div> ? Pour le référencement par les bots ?

Merci

Bonjour,

"Avoir beaucoup de div" dans l'absolu, cela ne pose aucun problème.

Le problème se pose si les div sont utilisés à la place d'élements plus significatif (div et span étant des éléments neutres ils conviennent à tout) et surtout plus sémantique.

Il est impossible de réellement répondre précisément à te question, mais j'aurais tendance à dire qu'un div n'a pas a être ajouté pour "chaque petit bloc de contenu", <p> serait plus approprié (ou autre, suivant le type de contenu).

ps. : Je déplace le sujet, qui n'a rien à faire dans la section CSS...
Modifié par Laurie-Anne (27 Sep 2010 - 08:39)

Hello,

En fait, il n'y a pas vraiment de problème technique particulier à faire une petite divite Au niveau référencement, ça ne pose à ma connaissance pas vraiment problème non plus. Par contre, <div> étant un élément n'ayant aucun sens sémantique, il ne doit en effet pas être utilisé en lieu et place d'une balise appropriée (sémantiquement) au contenu. Là, ça peut poser des soucis en terme de référencement, par exemple si tu utilise <div>Mon joli titre</div> au lieu de <h1>Mon joli titre</h1>...

Les divisions (comme leur nom l'indique) sont généralement utilisées pour différencier (et positionner, via CSS) les différentes zones de contenus d'une page. Ceci dit, il est inutile d'y recourir pour positionner un uniquement élément lui-même de type bloc, par exemple un menu sous forme de liste non-ordonnée. Exemple :

<div id="navigation">
<ul>
<li>Accueil</li>
<li>Contact</li>
</ul>
</div>

Puisque la balise <ul> est de type bloc, on peut (en XHTML) tout simplement utiliser :

<ul id="navigation">
<li>Accueil</li>
<li>Contact</li>
</ul>

De même pour des éléments tels qu'un pied de page ne contenant un petit paragraphe de mentions légales type copyright. On peut mettre en forme directement la balise <p>, la dimensionner, s'en servir pour retrouver éventuellement le flux du document avec la propriété clear, etc.

De la même façon, éviter au maximum les divisions vides de tout contenu (Ah! ce bon vieux <div class="wrap"></div> ).

Cela dit, pour reprendre mon exemple du menu, avec HTML5 on va rajouter l'élément <nav> autour de la liste non-ordonnée, mais à la différence de <div>, <nav> est bien un élément porteur de sens, et là ça change tout
Modifié par audrasjb (27 Sep 2010 - 11:34)

Merci beaucoup pour vos réponses.

J'ai essayé d'optimiser mon code afin d'utiliser le moins possible de <div> mais ça représente déjà un nombre considérable.

Les pages HTML, c'est-à-dire juste le contenu textuel, font minimum 50 ko !

J'avais surtout peur que ça gène les moteurs de recherche.

merci bien

comme disent les minimalistes : “Less is more !“

atoo a écrit :

J'avais surtout peur que ça gène les moteurs de recherche.

Par expérience je dirais que c'est le cas contrairement à ce que pense audrasjb. Le rapport entre la densité du code (html et inline javascript) dans la page et le contenu textuel devrait toujours pencher au maximum en faveur du contenu textuel.

Cela dépend du contenue. c'est claire que si tu est sur xhtml transi ou stricte les div c'est beaucoup plus pour la structure du site et les grandes lignes de ton gabariat. en HTML5 l'avantage c'est que certain div du genre div id="header" sont remplacé par les tags <header>, <footer>, ... justement pour évité ce genre de répétition et surtout pour identifier les contenues ( c'est plus facile pour un moteur de recherche de classé les rubrique de ton site dans <nav> que dans div nav ... )

Maintenant avant de créé les div enfants (les plus imbriqué) pense au contenue si tu peut remplacé ça par un <p> pour les paragraphe des ul li pour les listes des hn pour les titres c'est l'idéale.

Voili voila

atoo a écrit :
Bonjour,

Je suis en train de créer des pages avec une mise en page/forme entièrement CSS.

Je fais mon maximum pour garder un code léger mais j'ai énormément de <div> A part limiter le contenu de mes pages, je ne vois pas de solution pour limiter le nombre de div. A chaque petit bloc de contenu que j'ajoute, c'est div, div, div...

Ca reste clair et lisible quand-même, d'autant que j'ai mis des commentaires çà et là. Moi ça ne me pose aucun souci d'avoir beaucoup de div.

Mais alors pourquoi serait-il embêtant d'avoir beaucoup de balises <div> ? Pour le référencement par les bots ?

Merci

Du point de vue html div est fait pour contenir une section de plusieurs éléments de niveau block sans détemination particulière (contrairement à blockquote par exemple, qui fait exactement la même chose avec la détermination: tout ce qui est inséré concerne une section de citation, ou bien li qui indique la détermination: tout ce qui est inséré constitue un item de liste).

Pas de problème donc pour l'utilisation des div, mais en étant logique:

. si c'est pour du texte inline en général p est fait pour ça
. si c'est pour du texte inline = un heading de section (h1 h2 h3 ec..), alors hn doit être utilisé
. si c'est pour redoubler un conteneur de même niveau c'est complètement idiot (d'un point de vue html):
par exemple:

<div>
<div>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>

Ou Bien pour reprendre l'exemple de audrasjb:

<div id="navigation"> 
<ul> 
<li>Accueil</li> 
<li>Contact</li> 
</ul> 
</div> 

Par contre ceci serait très rigoureux:

<div id="conteneur_navigation">
<hn>Navigation</hn>
<ul id="contenu_navigation"> 
<li>Accueil</li> 
<li>Contact</li> 
</ul> 
</div> 

ou bien pour prendre une formulation plus générale:

<div id="conteneur_cette_section">
<hn>heading level n cette section</hn>
<div id="contenu_cette_section"> 
<p>Accueil</p> 
<p>Contact</p> 
<ul>
etc... etc...
...
...
</div><!-- fin contenu cette section -->
</div> <!-- fin conteneur cette section -->