Dois-je utiliser des <ul> et des <li> dans mes <nav>?


114

Le titre l'explique assez bien.

Maintenant que nous avons une <nav>balise dédiée ,

Est-ce:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

quoi de mieux que le suivant?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

Je veux dire, en supposant que je n'ai pas besoin d'un niveau DOM supplémentaire pour un positionnement / remplissage CSS, quelle est la méthode préférée, et pourquoi?


C'est une bonne question ... Avec des balises qui n'ont pas de sens pour HTML 4, l'une des meilleures pratiques précédentes s'applique-t-elle?
Guffa le

Réponses:


63

l'élément nav et la liste fournissent différentes informations sémantiques:

  • L'élément nav indique que nous avons affaire à un bloc de navigation majeur

  • La liste indique que les liens à l'intérieur de ce bloc de navigation forment une liste d'éléments

Sur http://w3c.github.io/html/sections.html#the-nav-element, vous pouvez voir qu'un élément nav peut également contenir de la prose.

Alors oui, avoir une liste dans un élément nav ajoute du sens.


Merci beaucoup, c'est ce dont j'avais besoin! De plus, le commentaire de robertc sur les lecteurs d'écran annonçant la «liste des 3 éléments» ci-dessous était très utile.
kikito le

7
On dirait que le tag UL n'aide rien: css-tricks.com/navigation-in-lists-to-be-or-not-to-be
psycho brm

2
Le lien semble fonctionner pour moi. Assurez-vous de lire le suivi, qui déclare des listes et aucune liste un tirage au sort. css-tricks.com/wrapup-of-navigation-in-lists
RobW

A mon avis, un <nav>sans <ul><li>semble avoir des menus enfants plus dynamiques. Que faire si vous avez plusieurs listes de menus de type et de positionnement différents dans le <nav>? Je regrouperais ces listes de menus comme <ul><li>dans le <nav>. Donc, si vos menus sont réguliers, j'irais avec <ul><li>.
wonsuc

3

À ce stade, je conserverais les <ul><li>éléments, la raison étant que tous les navigateurs ne prennent pas encore en charge les balises HTML5.

Par exemple, j'ai rencontré un problème en utilisant la <header>balise - Chrome et FF ont fonctionné comme un charme, mais Opera a embrouillé.

Jusqu'à ce que tous les navigateurs prennent complètement en charge HTML, je les conserverais, mais je me fierais aux anciens pour la compatibilité ascendante.


3
Utilisez le fichier javascript HTML 5 Shim ( remysharp.com/2009/01/07/html5-enabling-script ) pour atténuer les éventuelles erreurs de compatibilité ascendante avec des navigateurs tels que Opera et IE.
acconrad le

Mais alors votre site n'est pas convivial pour les scripts non intrusifs :)
Demian Brecht

1
Vous voulez dire jusqu'à ce que IE8 quitte le marché ... alors comme jusqu'en 2016 ...:)
Šime Vidas

@ Šime - justement :) Et désactiver Javascript n'est plus une option dans les navigateurs;)
Demian Brecht

@ Agent_9191 ça va - je suis complètement surpris aujourd'hui quand je voulais simplement vérifier combien de personnes sont encore sur IE7 et deviner quoi - dans la plupart des pays, il y a plus de gens sur des navigateurs comme Opera ou iPad safari que dans IE7. Je suis tellement heureux de pouvoir abandonner le support d'IE7 maintenant! Et IE8 disparaîtra tôt ou tard. C'est le dernier navigateur têtu auquel nous devrons faire face (IE9 n'est pas si mal contre lequel coder).
Camilo Martin

2

Cela dépend vraiment de vous. Si vous utilisez généralement une liste non ordonnée pour baliser votre menu de navigation, je dirais de continuer à le faire dans l'élément <nav>. Le but de l'élément <nav> est d'identifier la navigation du site vers un lecteur informatique par exemple, donc que vous utilisiez une liste ou simplement des liens n'a pas d'importance.


+1 pour avoir mentionné que pour les lecteurs d'écran, les navs et as sont tout aussi bons que les listes maintenant.
Camilo Martin

2

Pour moi, les listes non ordonnées sont un balisage supplémentaire qui n'est pas vraiment nécessaire. Lorsque je regarde un document HTML, je veux qu'il soit aussi propre et facile à lire que possible. Il est déjà clair pour le spectateur qu'une liste est présentée si une indentation appropriée est utilisée. Ainsi, l'ajout de l'UL à ces balises a n'est pas nécessaire et rend la lecture du document plus difficile.

Bien que vous puissiez gagner en flexibilité, je pense que c'est une meilleure idée de ne pas gonfler le balisage avec des classes ul non sémantiques et de styliser les éléments a d'un seul coup. Et vous n'avez aucune excuse: utilisez les pseudo-sélecteurs: before et: after.

Edit : J'ai été informé que certains lecteurs d'écran ARIA traitent les listes différemment des simples balises d'ancrage. Si votre site Web est destiné aux personnes handicapées, je pourrais envisager d'utiliser l'approche par liste.


1

Non, ils sont équivalents. N'oubliez pas que HTML 5 est rétrocompatible avec les listes HTML 4, vous pouvez donc vous sentir libre de les utiliser de la même manière. Le compromis est moins de code pour la 2ème version.

Si vous êtes préoccupé par la rétrocompatibilité avec les navigateurs, assurez-vous d'inclure ce shim pour fournir des fonctionnalités de balises telles que <nav>et <article>.


8
Une liste de liens fournit une sémantique et une accessibilité supplémentaires (par exemple, les lecteurs d'écran annoncent «Liste des trois éléments» lorsque vous entrez dans la navigation).
robertc

@robertc Le point des lecteurs d'écran est très bon. Vous auriez dû le mettre sur une réponse! Je l'aurais marqué comme correct. +1 dans tous les cas.
kikito le

1

Si nous parlons "par le livre", alors non; vous n'avez pas besoin d'utiliser des listes pour baliser votre navigation. Le seul réel avantage qu'ils offrent est d'offrir une meilleure flexibilité lors du coiffage.


1

Je garde les <ul><li>étiquettes, parce que les nouvelles balises ( <nav>, <section>, <article>etc.) ne sont que des versions plus sémantiques de l' <div>art.

Pour la même raison, vous n'auriez pas seulement une charge de liens dans un <div>, ils devraient également être structurés à l'intérieur d'une <nav>balise.


La raison pour laquelle j'ai utilisé des <ul> au lieu de nombreux liens dans un <div> dans le passé était précisément que les <ul> étaient plus sémantiques. Mais maintenant, les <nav> sont plus sémantiques. Je suis confus.
kikito le

2
Les <ul> sont encore plus sémantiques que les liens <a> simples, mais <nav> est plus sémantique que <div>. Le <ul> vs <a> est séparé de <nav> vs <div>
whostolemyhat

Ne pas se soucier de la sémantique n'est pas la voie à suivre pour écrire du HTML.
Andrew Marshall

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.