5568 sujets

Sémantique web et HTML

Html5 > nav (implémentation)

Bonjour,
Je voulais savoir si une balise <nav> pouvait englober un menu avec son sous-menu (non-imbriqué dans le menu) ou s'il fallait forcément mettre les 2 listes de liens dans des <nav> séparés.
Peut-être que je ne suis pas assez clair, un bout de code vaut mieux qu'un long discours :

<nav>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
  <ul>
    <li>Sous-Item1-1</li>
    <li>Sous-Item1-2</li>
    <li>Sous-Item1-3</li>
  </ul>
</nav>

L'exemple ci-dessus est-il bon ?
Autre interrogation, avec des <nav> séparés ou non je n'ai aucun moyen sémantique de préciser que la première liste n'est pas du même niveau que la seconde. Ca serait MAL d'englober la première liste d'une balise <header> ?.

La spec sur http://dev.w3.org/html5/spec/Overview.html#the-header-element ne semble pas contredire cette pratique :

a écrit :
A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.


Merci pour vos futurs éclaircissements Smiley smile
Glagla a écrit :
L'exemple ci-dessus est-il bon ?

L'utilisation de NAV est bonne.
L'utilisation des UL (non imbriqués) est fausse.

Glagla a écrit :
Ca serait MAL d'englober la première liste d'une balise <header> ?

Ça serait surtout très inutile. Valide, mais sans doute pas exploitable par les agents utilisateur (autrement dit, ne pas utiliser de HEADER ne changerait rien...).

Si tu as une zone de navigation complexe avec un titre et des informations associées, j'imagine que tu peux utiliser HEADER. Mais les cas de figure pour l'utilisation de HEADER dans NAV devraient être rares.
Exemple valide de liste imbriquée :
<nav> 
  <ul> 
    <li>Item1
      <ul> 
        <li>Sous-Item1-1</li> 
        <li>Sous-Item1-2</li> 
        <li>Sous-Item1-3</li> 
      </ul>
    </li> 
    <li>Item2</li> 
    <li>Item3</li> 
  </ul>
</nav>
Merci pour le retour.
Florent V., en fait j'ai préféré ne pas imbriquer mes ul car j'estimais que la séparation des deux navigations permet une respiration.
Par exemple sur la page présente d'alsacreations nous avons le menu principal :
"apprendre - forum - emploi"
et les sous-rubriques du forum dans un autre <ul> :
"accueil - s'inscrire - s'identifier - aide - recherche".
Donc au lieu de se perdre dans un <ul> imbriqué de la navigation (dans mon exemple pas énorme je le conçois), je split les <ul> pour permettre de skipper la navigation principale au profit de la sous-nav qui devient plus intéressante dans cette partie du site (utile par exemple pour les lecteurs d'écran pouvant passer de liste en liste par raccourci clavier).

Mais peut-être que je me dirige vers un mauvais choix. Dans ce cas je me rabattrais vers une liste imbriquée.
OK pour la séparation des menus.

Pour une mise en page avec une navigation principale dans l'en-tête, et une navigation secondaire dans une colonne à gauche, on pourrait avoir:
<body>
  <header>
    <h1>Nom/marque du site</h1>
    <nav>Navigation principale</nav>
  </header>
  <div>
    <nav>Navigation secondaire, disons à gauche</nav>
    <div>
      Contenu principal, peut contenir un ou
      plusieurs ARTICLE par exemple
    </div>
    <aside>
      Vous prendrez bien une colonne de droite, avec quelques
      liens vers des contenus ciblés du site?
    </aside>
  </div>
  <footer>Un pied de page</footer>
</body>

Dans le contenu principal, tu peux même mettre un ARTICLE long qui aura sa propre table des matières, à placer dans un élément NAV (le troisième de la page).

Sur l'idée d'avoir deux NAV l'un à la suite de l'autre... pourquoi pas. Ce ne serait pas ma solution préférée mais dans certains cas ça peut être logique.
Modifié par Florent V. (03 Sep 2010 - 18:56)
Bonjour,
Oui je pense après tout que la structure que tu proposes semble la plus adaptée à ce que je recherche plutôt que de réunir les deux <ul> dans un seul <nav>.

Merci
Sujet clos
Aller à