Granularisation du balisage HTML : parce que nos documents le valent bien…

Suite à mon dernier billet sur les différentes manières d’aborder le balisage HTML d’une hCard, Neovov et burningHat ont soulevé la question de la sur-sémantisation du code d’une manière générale et de la sur-utilisation des listes en particulier. Neovov, par exemple, ne voit pas pourquoi on devrait mettre des listes partout. burninHat quant à lui, se demande si l’on ne n’accorde pas trop d’importance à la description de notre code HTML… Magneto !

Trop de listes tue les listes ?

Il n’y a jamais trop de listes, car tout est une liste :

  • le mot est une liste ordonnée de lettres,
  • la phrase est une liste ordonnée de mots,
  • le paragraphe est une liste ordonnée de phrases,
  • le texte est une liste ordonnée de paragraphes.

Dans ces conditions, on peut même se demander pourquoi utiliser des balises p pour les paragraphes au lieu d’une bonne vieille balise li… Et oui, il est possible de faire des p dans le li (ok, elle était facile, celle-là…) 😀

Plus sérieusement, un des reproches que l’on fait souvent au HTML, c’est son manque de balises pour décrire les contenus. Alors ne boudons pas notre plaisir et profitons pleinement de nos 3 sortes de listes 🙂

Des descriptions à la Zola ?

La question que je me pose toujours quand je suis face à un document à intégrer htmlement parlant, c’est : à quoi celà devrait-il (va-t-il) ressembler en l’absence de feuille de style ou plus précisément : comment faire pour que la forme du document soit le plus proche possible du fond, sans CSS.

Je me rends compte que l’utilisation des listes à chaque fois que celà est possible améliore énormément la lisibilité des documents en donnant un aperçu de leur structure dès le premier coup d’oeil.

Reçu HTML 5 sur 7 😉

Je suis convaincu que la granularité du balisage HTML doit être la plus fine et la plus précise possible. A cet égard, les travaux sur le HTML5 vont dans ce sens avec l’arrivée prochaine des balises relatives au découpage des documents comme section, nav, article, aside, header, footer ou encore la présence de l’élément dialog pour regrouper certains type de contenus. Cet balise dialog qui s’ajoute d’ailleurs aux éléments permettant de faire … des listes.

Ainsi, même si l’on pouvait utiliser les listes de définition pour mettre en forme des dialogues, le HTML 5 pousse le découpage un cran au-dessus. Une des raisons qui milite selon moi pour cette granularisation, c’est l’accessibillité des documents pour les lecteurs vocaux qui pourront moduler l’intonation en fonction des différents type de balise HTML.

Note : les plus observateurs d’entre vous auront peut-être remarqué que j’aurais pu créer une liste non-ordonnée dans l’avant-dernier paragraphe avec l’énumération qui commence par section, nav, etc. Je n’ai pas opté pour une liste, car le flux naturel de lecture risque d’être perturbé par un découpage trop systématique 😉