Dois-je utiliser des <ul> s et des <li> s dans mes <nav> s?
Le titre l'explique à peu près.
Maintenant que nous avons un <nav> tag,
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>
mieux que ce qui suit?
<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 certains positionnement/rembourrage CSS, quelle est la façon préférée et pourquoi?
l'élément nav et la liste fournissent des informations sémantiques différentes:
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 à l'intérieur d'un élément nav ajoute du sens.
À ce stade, je garderais le <ul><li> éléments, car tous les navigateurs ne prennent pas encore en charge les balises HTML5.
Par exemple, j'ai rencontré un problème en utilisant le <header> tag - Chrome et FF fonctionnaient comme un charme, mais Opera borked.
Jusqu'à ce que tous les navigateurs prennent complètement en charge HTML, je les collerais, mais je compterais sur les anciens pour une compatibilité descendante.
Cela dépend vraiment de vous. Si vous utilisiez généralement une liste non ordonnée pour baliser votre menu de navigation, je dirais alors continuer à le faire dans l'élément <nav>. Le point de l'élément <nav> est d'identifier la navigation du site vers un lecteur informatique par exemple, donc peu importe que vous utilisiez une liste ou simplement des liens.
Je garderais le <ul><li> tags, car les nouveaux tags (<nav>, <section>, <article> et ainsi de suite) ne sont que des versions plus sémantiques de <div>s.
Pour la même raison, vous n'auriez pas simplement une charge de liens dans un <div>, ils doivent également être structurés à l'intérieur d'un <nav> tag.
Pour moi, les listes non ordonnées sont des balises supplémentaires qui ne sont pas vraiment nécessaires. Quand 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 l'indentation appropriée est utilisée. Ainsi, l'ajout de l'UL à ces balises a est inutile 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 peu sémantiques et de styliser les éléments a d'un seul coup. Et vous n'avez aucune excuse: utilisez les pseudo-sélecteurs: avant et: après.
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 basée sur une liste.
Il y a un article vraiment détaillé sur CSS Tricks sur cette question précise. C'est évidemment une question très débattue; le post a plus de 200 commentaires.
Navigation dans les listes: être ou ne pas être (astuces CSS, janvier 2013)
Non, ils sont équivalents. Rappelez-vous, HTML 5 est rétrocompatible avec les listes HTML 4, vous pouvez donc vous sentir libre de les utiliser dans le même sens. Le compromis est moins de code pour la 2e version.
Si vous êtes préoccupé par la compatibilité descendante par rapport aux navigateurs, assurez-vous d'inclure ce shim pour fournir des fonctionnalités de balises telles que <nav> et <article>.
Si nous parlons "d'après le livre", alors non; vous n'avez pas besoin d'utiliser des listes pour baliser votre navigation. Le seul véritable avantage qu'ils offrent est d'offrir un meilleur degré de flexibilité lors du coiffage.