31 votes

Utilisation correcte de la balise nav HTML5

<ul class="mainMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#" class="mainSelected">Construct</a></li>
    <li><a href="#">Arcade</a></li>
    <li><a href="#">Manual</a></li>
</ul>
<ul class="subMenu">
    <li><a href="#">Homepage</a></li>   
    <li><a href="#">Construct</a></li>
    <li><a href="#" class="underSelected">Products</a></li>
    <li><a href="#">Community Forum</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Est-il plus correct d'un point de vue sémantique d'avoir une <nav> autour de ces deux <ul> individuellement, ou est-ce qu'une seule marine doit envelopper les deux ?

Serait-il également approprié d'utiliser la balise nav pour envelopper les éléments de menu de mon pied de page ?

43voto

Martin Jespersen Points 13702

Pour citer les spécifications :

L'élément nav représente une section d'une page qui renvoie à d'autres pages ou vers des parties de la page : une section avec des liens de navigation.

Tous les groupes de liens d'une page ne doivent pas dans un élément nav - seules les sections qui consistent en des blocs de navigation sont appropriées pour l'élément nav est approprié. En particulier, il est courant pour les pieds de page d'avoir une courte liste de de liens vers diverses pages d'un site, telles que comme les conditions de service, la page d'accueil d'accueil et une page de copyright. L'élément footer est suffisant dans ce cas, sans élément cas, sans élément nav.

Vous pouvez donc les regrouper dans une seule balise nav. N'emballez pas le pied de page mais utilisez la balise footer ici :)

Lisez les spécifications ici : http://dev.w3.org/html5/spec/Overview.html#the-nav-element

10voto

Roger F. Gay Points 734

La recherche de la raison de la marine se poursuit depuis des années maintenant. Il suffit de chercher sur Google pour trouver des dates qui remontent à son introduction. La seule utilisation réelle de nav que j'ai trouvée jusqu'à présent est de l'associer à un style en css. Avant de dire qu'il y a de meilleures façons de le faire, considérez que les programmeurs ne sont pas les seuls à faire du balisage de pages. Pour un artiste commercial qui conçoit des pages Web pour gagner sa vie, il est préférable d'avoir une balise simple plutôt que de penser à des classes et des sous-classes. Si vous avez suivi les discussions au sein de divers groupes pendant un certain temps, vous avez l'impression que je pourrais très bien avoir raison sur ce point. De nombreux développeurs de pages ne pensent qu'au style - ce sont des artistes, pas des programmeurs.

Un peu plus de confirmation : Si vous regardez les nouvelles balises structurelles de HTML5, vous pouvez facilement avoir l'idée que le comité voulait des éléments majeurs bien définis dans une page. Chaque élément majeur peut avoir un aspect et un comportement différents. Si vous voulez concevoir une page Web typique, il peut être très pratique que quelqu'un ait déjà donné des noms aux balises de section de la page, afin que vous puissiez vous atteler à la tâche de les styliser. Ajoutez une balise nav dans la partie de la page où vous fournissez une section de navigation. Qu'est-ce que c'est, vous vous demandez ? Il ne s'agit pas d'une des autres sections déjà prédéfinies, comme le pied de page ou la barre latérale. Voici un tutoriel montrant où, selon l'auteur, se trouve la section de navigation - juste là où on l'attend.

C'est bien. Si je veux construire une page qui ressemble à un million d'autres pages, et que ma seule préoccupation est de faire en sorte que mes choix de couleurs et mes éléments artistiques soient différents de ceux des autres, tout cela est assez routinier. En tant que programmeur, je ne veux pas toujours cela. Je veux de la flexibilité pour accomplir tout ce dont la fonctionnalité envisagée a besoin d'une manière logique et facile à utiliser. Ce serait bien si c'était plus facile que plus difficile. Donc, juste pour donner un peu de contraste pour montrer qu'il y a deux côtés à cette histoire - je déplore la perte des framesets et des cadres dans HTML5. iFrames sont de mauvais substituts.

Les gagnants qui s'intéressent au style sans trop se soucier de la structure et de la fonctionnalité concevables ont toujours voulu pousser le développement en css, qui n'est pas un langage de programmation. En ce qui concerne la perte des cadres, il semble que je vais être ramené à l'époque où la plupart des pages Web étaient structurées par des tableaux, sauf qu'ils veulent que je définisse les tableaux en css plutôt qu'avec des balises dans la page. Il semble qu'ils fassent tout leur possible pour bloquer toute avancée sur les pages dynamiques, ne permettant que les rechargements complets de la page pour restructurer les choses. (Ce qui n'est pas vrai si vous voulez passer d'une image à une autre au sein de la même structure de page).

J'en ai peut-être dit un peu plus que nécessaire pour répondre à la question, mais j'ai pensé qu'il serait utile d'élargir un peu le contexte général.

6voto

Ian Devlin Points 8885

Je suis d'accord avec Martin. Enveloppez-les dans un seul élément nav.

En ce qui concerne le pied de page, oui, utilisez un autre élément de navigation, pour autant que les éléments permettent de naviguer dans le site.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X