<C²: webløg />

Courriel - email address

Avatar Denis

mercredi 01 octobre 2003
par Denis Boudreau

Sémantisation par les listes HTML

Dans une recherche évolutive d'amélioration structurelle du (x)HTML, nous sommes toujours à l'affut de trucs et astuces nous permettant de mieux comprendre comment arriver à améliorer la sémantique de notre code. Une bonne manière de faire cela est bien sûr de réfléchir à l'utilisation que nous faisons des éléments HTML et de se questionner si l'élément envisagé pour répondre à tel ou tel besoin est bel et bien l'élément HTML le plus approprié pour remplir ce rôle.

Un des cas de figure qui laisse le plus souvent le développeur dans la confusion consiste à déterminer l'approche à adopter pour coder des menus de navigation. Dans ce domaine, au fil des ans, nous avons tout vu; des tableaux HTML avec des <td> alignés pour simuler les différents éléments d'un menu horizontal, des paragraphes séparés par des <br /> pour créer un menu vertical, etc. Si ces techniques utilisées à outrance par le passé ont toujours semblé faire le travail dans nos environnements contrôlés, il n'en demeure pas moins que la véritable nature du menu HTML a toujours échappé au développeur moyen.

En attendant que XHTML 2.0 nous amène l'élément <nl> qui représentera le navigation list, il importe de tout de suite commencer à se familiariser avec le concept très simple qu'un menu, peu importe la forme qu'il prendra, est d'abord et avant tout une liste d'éléments (cliquables) permettant de naviguer dans un site. Or, une liste, quelle que soit son rendu visuel, demeure toujours conceptuellement une série de <li> enveloppés d'un <ul> ou d'un <ol>.

Voilà déjà plusieurs mois que j'ai intégré l'utilisation des listes HTML à mon arsenal de bouts de code pour gérer ce type d'éléments. D'ailleurs, c'est exactement la façon dont mon menu est construit pour ce site; peu importe à quel point mon menu de navigation a l'air d'un tableau HTML, il n'en demeure pas moins qu'avec une petite liste toute simple et quelques règles CSS, il m'a été possible de construire quelque chose de très fonctionnel. Le véritable bonheur là-dedans, c'est que j'ai la certitude que lorsque mon document HTML sera interprété par un navigateur texte ou tout autre agent utilisateur incapable de supporter la "complexité" des feuilles de style, ma structure HTML derrière sera toujours aussi significative. Voilà un autre avantage de coder sémantique (et de séparer sa présentation de son contenu) !

Évidemment, c'est pas forcément tout le monde qui a envie de se mettre les deux bras dans l'huile de code (x)HTML/CSS jusqu'aux coudes... et c'est pour cela que notre bon ami Ian Lloyd a conçu List-o-matic.

Denis Boudreau | 2003.10.01 @ 21:55

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2003.10.02 @ 02:05 par Jean Lalonde

L'outil de Ian Lloyd est très pratique. J'utilise le CSS sur mon site mais sans vraiment bien le comprendre. J'ai de la lecture en réserve sur le sujet
(http://www.amelioraction....).

Une question: si j'implante le menu CSS+<li> est-ce que le style sera spécifique au menu? cela affectera-t-il les autres <ul> de ma page?

Haut retour au début de la page

2003.10.02 @ 03:02 par Darken

Whaahahahaaa trop terrible List-o-matic. Merci pour le lien :o)

Sinon pour répondre à Jean :
« Une question: si j'implante le menu CSS+<li> est-ce que le style sera spécifique au menu? cela affectera-t-il les autres <ul> de ma page? »

En pratique, la liste utilisée par le menu se trouve souvent englobée dans un div représentant la zone de navigation du document.

<div id='Navigation'>
<ul>
<li><a href='koala.xhtml'>Tortue</a></li>
<li><a href='kangourou.xhtml'>Kangourou</a></li>
<li><a href='sauterelle.xhtml'>Sauterelle</a></li>
<li><a href='tortue.xhtml'>Tortue</a></li>
</ul>
</div>

Après dans le css c'est à coup de :

#Navigation ul { ... }

Haut retour au début de la page

2003.10.02 @ 03:44 par xave

Ben oui, je suis pour, mais alors pourquoi les liens du TopOfPage (contenus, Accessibilité, etc.) ne sont-ils pas eux aussi rangés dans une liste ?

Haut retour au début de la page

2003.10.02 @ 03:57 par Eric Daspet

Malheureusement il manque encore en HTML un jeu de balises pour traduire les listes sur plusieurs niveaux.

On peu imbriquer les listes mais le problème survient quand il faut donner un titre à chaque sous arbre. Là il y a plein de façons de faire et pas une vraiment satisfaisante.

Haut retour au début de la page

2003.10.02 @ 04:24 par Dam

Darken plutot que d'alourdir ton code en 'enrobant' ta liste d'un div il serais plus judicieux d'identifier ta liste a l'aide d'un id='menu_nav'
et de reporter (ul|ol)#menu_nav dans la CSS pour specifier que le style est valable uniquement pour le menu de navigation

(ps : il manque toujours un <a name=''> pour aller directement aux commentaires ;))

Haut retour au début de la page

2003.10.02 @ 11:09 par CYBERcodeur

<quote user='xave' target='dans_les_dents_de_Denis'>
Ben oui, je suis pour, mais alors pourquoi les liens du TopOfPage (contenus, Accessibilité, etc.) ne sont-ils pas eux aussi rangés dans une liste ?
</quote>

Ouch, elle m'avait échappé celle-là. Je corrigerai dès que j'ai une minute :)

Eric, n'est-ce pas la justement tout l'intérêt de l'éventuel élément <nl> ou peut-être même de l'élément <l>, inclus dans XHTML 2.0 ?

Dam, oui, je sais, c'est sur ma liste ! Je pense même que l'ID du saut direct vers les commentaires portera ton nom ! Tu l'auras bien mérité ;)

Haut retour au début de la page

2003.10.02 @ 11:41 par Anubis

Attention Denis...

Je rappelle pourquoi nous mettons les liens dans des listes, d'après les règles de base de l'accessibilité, les liens se doivent d'être séparés distinctement les uns des autres.

L'une des solutions consiste à les mettre dans une liste, la seconde consiste à tout simplement les séparer par un caratères distinctif, comme tu l'as fait, Denis, dans ton menu supérieur d'accessibilité.

Personne ne pourra donc jamais te reprocher de ne pas avoir fait une liste, c'est clairement un choix personnel, mais tout à fait justifiable.

Haut retour au début de la page

2003.10.02 @ 11:51 par CYBERcodeur

Une très bonne observation Anubis, je te remercie de bien remettre les choses en contexte, les pendules à l'heures, les point sur les 'i' et les barres sur les 't'. :)

Parfois, on a tendance à oublier les raisons qui nous poussent à faire telle ou telle chose, à prendre telle ou telle décision. S'il est vrai que dans un principe d'accessibilité, ma façon de faire était tout à fait irréprochable (mis à part les choix de couleurs pas assez contrastants qu'un ami m'a fait observé cette semaine), il n'en demeure pas moins que l'élément HMTL le plus approprié pour traiter ce cas de figure demeure la liste HTML.

C'est donc pour cette raison (et seulement celle-là) que je souhaite modifier mon code, pas parce que ma pratique est mauvaise. Si cette pratique est viable et bonne d'un point de vue d'accessibilité et de conformité aux normes, je souhaite pousser la sémantique plus loin et dès lors, à mon avis, le recours à la balise actuelle n'est pas l'idéal.

De toute façon, puisque je dois aller jouer dedans pour améliorer l'accessibilité de sa présentation, autant lui donner un petit coup de sémantique au passage.

Ceci dit, très bonne observation mon cher ami.

Haut retour au début de la page

2003.10.02 @ 11:59 par Anubis

[Complètement hors-sujet ]

Pourquoi mon commentaire a-t-il disparu ?

Si c'est de la censure (que je ne comprends pas), il serait bien d'en être informer...

Si c'est un bug, alors le voilà maintenant signalé .

J'ai posté vers 17:00 (GMT+1) la traduction de mes arguments du point de vue utilisateur final... Merci de regarder ce qui s'est passé.

Haut retour au début de la page

2003.10.02 @ 12:00 par CYBERcodeur

Mais voyons moi, te censurer ? Jamais !!!

C'est donc un bug j'imagine. Nous allons essayer de comprendre ce qui a bien pu se passer. Si t'as plus d'info à me donner à ce sujet, je t'invite à m'envoyer un mail et on se penchera la-dessus. Ceci dit, si t'as envie de reprendre ce que tu disais, je serais très intéressé à te lire.

Mais la censure, alors ça, jamais ! :)

POUR INFO :

La même chose vient de m'arriver en postant ce message, qui a aussi fait disparaitre le tien Anubis. Très curieux. J'ai remis le tien en place puisque j'en avais une copie en cache, mais je m'explique mal ce qui est en cause. À surveiller de près.

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)