Listes non-ordonnées : plus que de simples puces

2005-04-25 : Cette page est la traduction française par Patrick Blanchenay du document intitulé Unordered lists: more than just bullets disponible à l'adresse : http://www.w3.org/QA/Tips/unordered-lists. Même si le document original n'a pas valeur normative, il reste la seule référence, notamment parce qu'il est susceptible d'évoluer. Par ailleurs, des erreurs de traduction ont pu survenir.

Le concept de liste

Quand vous balisez un contenu qui pourrait d'une certaine manière se définir comme une liste, prenez en considération la liste non-ordonnée (unordered list, <ul>) pour le présenter. Non seulement cela améliore la lisibilité de votre code HTML, mais en plus, cela ajoute du sens à un contenu qui n'en aurait pas sinon.

Dénigrées et sous-utilisées

De nombreux sites évitent d'utiliser les listes non-ordonnées pour baliser du contenu alors que c'est exactement ce qu'il faudrait. Sur ces sites, vous verrez souvent des groupes de balises <div> séparées par des <hr> (lignes horizontales) ou des floppées de balises <a> séparées par des délimiteurs | (barre verticale) ou • (&bull;). Le bagage de style CSS (marges, puces, etc.) qui vient avec l'élément <ul> en est sans doute la principale raison. Nombreux sont les webmasters qui croient plus facile d'appliquer des styles à un élément vierge comme <div>, plutôt que de les enlever à l'élément <ul>. Ajoutez à cela une gestion différente des styles par défaut selon les navigateurs et nous avons là un joli bazar.

Heureusement le CSS, qui permet à une liste d'avoir la même apparence sur tous les navigateurs visuels modernes, et identique à celles de <div> ou même de <span>, est largement supporté. Reportez-vous à la section  En savoir plus pour des sites expliquant comment faire.

Les avantages des listes non-ordonnées

Donner du sens au contexte

Les éléments comme <div> et <span> sont sémantiquement vides : ils ne donnent pas de sens et ne font que grouper des éléments de contenu en blocs. Le seul sens qu'ils ont, c'est que le CSS modifie leur affichage dans un navigateur visuel.

En groupant un contenu qui s'y prête en liste, le balisage confère du sens à votre contenu, et ce indépendemment de votre feuille de style. Les agents utilisateurs qui n'utilisent que le contenu (et ignorent votre CSS visuel), par ex. les navigateurs textuels, les navigateurs auditifs et même les moteurs de recherche, peuvent comprendre votre organisation d'éléments en liste et peuvent la traiter (ou l'interpréter) comme tel.

Améliorer la convivialité [NdT : usability] de votre site

Afficher une simple série de liens (éléments <a>) amène un navigateur textuel à les afficher côte à côte, rendant le choix difficile pour le visiteur. De nombreux tutoriels préconisent une solution bancale : insérer des délimiteurs entre les liens pour éviter la confusion. Les mêmes problèmes se posent quand on utilise des <div></div> <div></div> pour afficher du contenu, séparés par des <hr> ou des bordures CSS, qui ne donnent pas l'impression que les blocs appartiennent à une série.

Au contraire, si vous utilisez des listes non-ordonnées pour cela, les navigateurs non-visuels renderont votre contenu sous forme de liste plutôt qu'une soupe d'éléments ou de blocs ordinaires. La séparation ou le regroupement d'éléments se fait automatiquement en fonction de leur sens ; pas besoin de séparer les éléments artificiellement par des délimiteurs ou des lignes horizontales.

C'est une bonne chose

La notion de liste justife que ses éléments restent groupés, même quand votre feuille de style est ignorée. Pour structurer un document, c'est une bonne habitude que d'utiliser des listes non-ordonnées là où leur usage est approprié.

En savoir plus


XHTML 1.0 valide !
Date de création : 2004-06-09 par Brian Huisman
Dernière modification $Date: 2011-06-03$ par $Author: ot $

Droit de copie ©2000-2003 W3C ® (MIT, ERCIM, Keio), Tous droits réservés. Les règles de responsabilité, de marque déposée, d'utilisation du document et de licence sur les logiciels du W3C s'appliquent. Votre interaction avec ce site est en accord avec notre politique sur la vie privée, pour le public et pour les membres.