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
verticule) 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 une mise en forme à un élément
vierge comme <div>,
que de les enlever
de 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 permettant
à 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 ne fait que résulter de la
façon dont le CSS modifie leur affichage dans un navigateur
visuel.
En groupant un contenu qui s'y prête en liste, le contenu y gagne du sens par le balisage, 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 série
ordinaire de liens (éléments <a>)
amène un navigateur textuel à les afficher
côte à côte, rendant difficile pour le
visiteur de choisir. De nombreux tutoriels préconisent une
solution bancale : insérer des
délimiteurs entre les liens pour éviter toute
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.
Si au contraire 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 d'ordinaires. La séparation de sens et le groupage des éléments se font automatiquement ; pas besoin de séparer les éléments artificiellement par des délimiteurs ou des lignes horizontales.
La sémantique des listes justifient qu'un groupe d'élements reste ensemble, 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ù c'est approprié.
Date
de
création : 2004-06-09 par Brian
Huisman