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

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?

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.

À 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.

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.

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.

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>.

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.

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.

Il y a un article très détaillé sur CSS Tricks à propos de cette question exacte. C'est évidemment une question très controversée; le message a plus de 200 commentaires.

Navigation dans les listes: être ou ne pas être (CSS Tricks, janv.2013)