Le concept de liste· Les avantages·En savoir plus ·
Index des conseils· Page d'accueil QA· QA IG· Validation· QA-dev
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.
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.
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 • (•). 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 é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.
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.
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é.
Date de création : 2004-06-09 par Brian
Huisman