[Coup de gueule 2] Arrêtons de remplacer systématiquement les tableaux par des div !

Ou "le retour de la Divite Chronique".

Me voici dans ma période : "ras le bol de toujours répéter les mêmes choses". Suite à un rappel sur les confusions entre XHTML et CSS, voilà donc un billet qui rappelle que la Divite est aussi dangereuse que la Cellulite (en HTML, je précise).

Un billet d'humour, nommé "Maladies exotiques des CSS" avait été publié il y'a déjà deux ans sur ce blog.

Note : dans ce billet je n'évoque que la balise <div>, mais comprenez que le discours est le même pour la balise <span> dont la seule différence avec <div> est le type.

Suite à la parution du livre CSS2 : pratique du design Web, le contenu de ce billet humoristique avait été inclu dans l'ouvrage (chap 3, page 55), et contraint par les droits de l'éditeur à ne plus figurer en ligne sur le blog.

Cependant, au vu des nombreuses confusions que l'on peut observer dans divers forums, il semble que les nouveaux webmasters, suivent la mode "CSS" sans réellement comprendre le principe et la philosophie et se mettent à systématiquement remplacer leurs cellules de tableau par des éléments <div>. Alors Non, la conception web moderne ne se limite surtout pas à utiliser des <div> !

Parmi les citations préférées du néo-webmaster on compte certainement celle-ci : Bouh les tableaux c'est dépassé, moi je remplace par des <div> !

Et là on se dit que c'est pas gagné. Pas gagné pourquoi ? Parce que nous avons affaire à un nouveau cas de Divite Chronique.

Dire que les CSS, c'est utiliser les <div>, remplacer systématiquement les cellules de tableaux par une balise unique, <div>, c'est transformer une structure tabulaire en quelque chose de plus complexe, autant imbriquée, que l'on rend incompréhensible (puisque la balise <div> n'a aucune signification contrairement à toutes les autres balises).

Rappelons une fois de plus que le principe de la "conception web moderne" est d'apporter du sens (de la sémantique) au document afin de le rendre universel, en employant les balises appropriées, celles qui donnent du sens justement : <p> pour les paragraphes, <hn> pour les niveaux de titre, <blockquote> pour les blocs de citation, <ul> et <ol> pour les listes, <em> pour la mise en emphase, etc. La fonction de la balise <div> est de regrouper des éléments ayant du sens, ou alors d'être employée lorsqu'aucun autre élément pertinent ne convient.

Utiliser une balise unique comme <div> va à l'encontre de cette philosophie, et - plus important - rend la lecture bien plus complexe pour l'ensemble des agents utilisateurs (navigateurs, moteurs de recherche, outils adaptés). Et l'on retrouve là un des gros inconvénients des logiciels automatiques non-intelligents comme Dreamweaver ou Golive qui se contentent en général de "faire des calques" (<div> ou <span>).

Bref, sus à la Divite Chronique et apprenons d'abord à utiliser chaque balise à bon escient plutôt qu'une balise unique.

Pour rappel : Respecter la sémantique XHTML (Openweb), Le point sur la sémantique (Blog Alsacréations).

Résumé du billet : L'intérêt des standards est de diversifier et de justifier les éléments (balises) par leur sens. Chaque balise a une fonction (titre, paragraphe, liste, ...).

Afin d'être restitué au mieux sur l'ensemble des agents utilisateurs (navigateurs, mais aussi moteurs de recherche, plages braille, ...), utilisons chaque balise selon le sens qu'elle apporte, plutôt que de se cantonner à une balise unique <div> dont le seul sens est d'être employée lorsqu'aucune autre balise n'a lieu d'être.

Par Raphael GOETTER - mercredi 20 septembre 2006 à 10:36

Conception Web - #281 - Lu 9733 fois - Intérêt du billet: 3.14(14) - Fil RSS

Trackbacks

Le mercredi 20 septembre 2006 à 21:46, de LiberT - Blog :: #

Podcast #1 : premiers essais, réglages et dérapages...

Ca y est ! Je me suis lancé ! Enfin un podcast, audio pour cette fois, la qualité est médiocre, mais on fait avec le matériel qu'on a. Au programme : Wikio, Coups de gueule version Alsas, Gaspanik, La religion et les médias, le podcasting sous linux...

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le mercredi 20 septembre 2006 à 12:30, par Lanza :: site :: #

Je pense que c'est un passage normal et que l'on peut difficilement l'éviter lorsqu'on passe des tableaux au CSS.

C'est pas grave, tant qu'on ne reste pas coincé à cette étape.

Le mercredi 20 septembre 2006 à 12:51, par dib258 :: site :: #

Moi je pense surtout que ceux qui remplace tout les tableaux par des div sont des personnes qui n'ont pas connues la période où l'on devait découpé sont design pour le faire rentrer dans des tableaux. Et que c'était bien lourd. Le passage au CSS et les div's furent une belle échappatoire, et une nouvelle liberté.

Alors que le tableau en lui même n'est pas une mauvaise chose, si elle doit contenir des informations et non plus que des images pour embellir le site.

Donc, si c'est pour certaines informations, le tableau est tout à fait approprié...

Le mercredi 20 septembre 2006 à 14:26, par AymericJ :: site :: #

Yop Raphael, ça me rappelle une réponse fournie à une demande d'informations sur le hub (j'ai vu venir ta crise de foi de loin ;) ), ou j'ai du "surpréciser" une de mes réponses en relativisant l'importance du combat <div><table> par rapport à l'importance de l'utilisation judicieuse et sémantique des balises : un texte plus gros en rouge que ce soit en "dur" dans la page ou via un css n'a aucune valeur, un <hx>oui.

Là ou je suis pas totalement d'accord avec toi (ou plutôt avec le texte que tu viens d'écrire) c'est que certes <div> n'a pas de signification et son abus est nuisible, mais <table> à une signification sémantique et l'utiliser à fin de mise en page "uniquement" (et non pas pour des données tabulaires) revient à la détourner de son usage premier.

Le mercredi 20 septembre 2006 à 14:52, par Christophe :: site :: #

En forme aujourd'hui ! Un petit apéro à ParisWebDesign te fera le plus grand bien demain soir ;)

Le mercredi 20 septembre 2006 à 15:02, par Oryo :: #

Merci pour le rappel sur l'xhtml.

Pour lestableaux et les div, c'est ok, c'étais déjà bien encré :-)

Le mercredi 20 septembre 2006 à 16:03, par katsoura :: site :: #

"contraint par les droits de l'éditeur à ne plus figurer en ligne sur le blog" => ah bon, ils ont ce droit ?

Le mercredi 20 septembre 2006 à 16:06, par ilovedesign :: site :: #

je trouve qu'il est nettement plus facile de s'ensortir avec des div qu'avec des tableaux. Les tableaux sont simplement une mise en forme oldschool :-P

Le mercredi 20 septembre 2006 à 16:10, par Raphael :: site :: #

@katsoura : oui le contrat d'édition protège l'éditeur contre toutes les "copies" du livre, même si ces copies sont en ligne

@ilovedesign : Raaaah je crois que le combat est vain... à moins que ce ne soit un humour qui me dépasse, tu n'as pas lu le contenu du billet :-/

Le mercredi 20 septembre 2006 à 17:26, par aphoris :: site :: #

Sinon on peut peut être inclure des div dans des tables avec des class dans des id. lol



Le débat ne devrait peut être même pas avoir lieu, et il serait peut être plus normal de s'interroger d'abord sur l'efficience de telle ou telle méthode, que ce soit en terme d'ergonomie ou d'accéssibilité.

Le mercredi 20 septembre 2006 à 23:11, par cucureuil :: #

Mais une balise div, qui veut dire division (si je ne m'abuse) possède au moins le sens sémantique de diviser, ce qui peut se rapprocher HTMLement parlant de "faire des paquets" d'informations.
C'est pas un peu fort de dire qu'elle n'a aucun but?
Depuis le web2, on a quand même le XHTML qui sert à diviser le contenu et la forme grâce à ces balises div non?
(oui bon cette dernière phrase, c'est de l'humour...)

Le jeudi 21 septembre 2006 à 00:31, par naholyr :: #

De toute façon je crois qu'à partir du moment où l'on critique les tableaux "parce que c'est dépassé" ou "oldschool", on fait déjà fausse route dans l'idée de départ...

C'est comme utiliser une clé USB juste parce que les disquette 3"1/2 c'est has been. Il y a de vrais raisons à préférer une clé USB à une disquette ou vice-versa selon les usages, selon la plate-forme, selon le système cible, etc...

Quand un développeur rejette une technique parce qu'elle n'est plus à la mode, il n'a tout simplement rien compris.

Le jeudi 21 septembre 2006 à 09:28, par clb56 :: site :: #

Je ne savais pas que la cellulite était une maladie ;-)

Le jeudi 21 septembre 2006 à 10:31, par Oryo :: #

"Les tableaux sont simplement une mise en forme oldschool"
Il a parlé de mise en forme sans doute dans le sens de mise en page.
Par contre je suis sur qu'il en utilise encore pour des tableaux de données ;-)

Le jeudi 21 septembre 2006 à 10:52, par Frank Taillandier :: #

<div> ça veut pas dire division ?
Pour moi ça a du sens et ça aide aussi à mieux utiliser cette balise pour sa mise en page ( entête, contenu, pied de page). Après il faut bien avouer que quand on commence à vouloir faire des trucs compliqués, le recours à des balises supplémentaires est parfois inévitable. Y'a qu'à regarder le code source du ZenGarden pour s'en convaincre.

Le jeudi 21 septembre 2006 à 10:57, par Raphael :: site :: #

@Frank Taillandier > Oui, <div> signifie "division", mais elle est rarement utilisée *uniquement* dans le but de faire des divisions.
Le gros problème, comme avec les tableaux, est surtout l'imbrication multiples de <div> qui n'a alors aucun sens.

Pour ce qui est de ZenGarden, c'est un peu spécial : le code HTML de base a été prévu dès le départ pour pouvoir être très modulable et complètement stylable. Il est donc très lourd et souvent pour rien, mais l'avantage est que n'importe quel élément peut être stylé n'importe comment.

Le vendredi 22 septembre 2006 à 22:45, par chris :: #

autre avantage du div c'est de pouvoir reformuler la mise en page grâce d'un css différent.
on peut donc avoir la même page avec le menu en haut ou le menu à gauche simplement avec un css différent (impossible avec un tableau). On peut aussi avoir un css adapté à la lecture sur petit écran de terminaux mobile (pda par exemple)

Le samedi 23 septembre 2006 à 12:50, par Raphael :: site :: #

@chris > non justement, les <div> n'ont rien à voir avec cela : n'importe quelle balise peut être "reformulée grâce aux CSS".
C'est tout le but de ce billet : ne pas croire que les CSS se limitent à la balise <div>

Le dimanche 24 septembre 2006 à 12:25, par Sun Location :: site :: #

Quand on a développé des sites internet pendant 5 ou 6 ans avec des tableaux, il est difficile de s'habituer à une construction différente avec des <div>. J'ai personnellement essayé plusieurs fois de développer avec des div, mais on se retrouve souvent confronté à des problèmes : décallage, incompatibilité entre les navigateurs, des obstacles qui destabilisent lors de la transition vers un codage plus propre des pages web.

Tous ca pour dire qu'un jour, on développera nos sites tout en div : les editeurs WYSIWYG mettrons plus en avant ces balises, et la, on sera bien :).

Le dimanche 24 septembre 2006 à 16:00, par Raphael :: site :: #

Raaaaah mais arrêtez tous de "développer vos sites en <div>" !!
Nondidju !!!

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.