Pertinence de Hn dans un header/nav/footer de site

Bonsoir à tous,

Je m'interroge sur la pertinence de mettre des Hn dans un header ou un footer ou encore dans la nav d'un site...
En effet je vois un peu partout l'utilisation de h3 dans des drop-down menus, des h2 en amont de listes de sous-rubriques, ... et je me demande quel peut bien être l'intérêt sémantique (je ne porte aucun jugement, je m'interroge voilà tout).

Parlons concrètement, voici un exemple simplifié basé sur le site du Guardian :

<div id="header">
  ...
  <div id="drop-down-edition">
    <h2>Edition:</h2>
    <span class="uk">UK</span>
    <span class="us">US</span>
  </div>
  ...
  <div id="guardian-logo">
    <a href="...">The Guardian</a>
  </div>
  ...
</div>

Lorsque je suis confronté à des situations similaires avec des "pseudo-titres", j'ai plutôt tendance à employer des balises <b> tout simplement (très neutre donc). J'évite d'employer des balises Hx ou <strong> car selon moi elles ont des valeurs sémantiques fortes et donc à employer dans le contenu de la page à proprement parler.

J'aimerais bien avoir vos opinions et/ou vos pratiques sur le sujet
Modifié par wbnet (17 Oct 2013 - 00:25)

Hello Victor,

Merci pour ta réponse.
J'ai pris le premier exemple qui me passait sous la main, la version actuelle est effectivement loin d'être parfaite (la nouvelle version alpha est beaucoup plus light et clean), mais au moins j'avais de quoi montrer un h2 traînant dans le header.

Par ailleurs, entendons-nous bien, je parle des header/nav/footer globaux d'un site, pas d'un <header> qu'on emploierait dans un <article> par exemple.

Ta réponse est très intéressante, en particulier concernant les lecteurs d'écrans, et je vais rebondir dessus justement. Quel serait l'intérêt pour un internaute utilisant ce système de tomber sur des "titres" accessoires en passant en revue les différents hn du site? Surtout s'il doit se farcir tous les intitulés de rubriques d'une nav ou tout ce qui est lié au fonctionnel du site alors qu'il veut simplement savoir de quoi parle la page.

Autre exemple concret, je bosse actuellement sur une refonte d'un gros site e-commerce et le header est plutôt complexe. Dans un premier niveau j'ai 2 drop-down menus "Newsletter" et "Mon compte". J'ai opté pour cette forme (non sans hésitation sinon je ne serais pas là ) :

<!-- Je schématise bien sûr -->
<header class="header-du-site">
  <h1>Le site</h1>
  <ul class="premier-niveau">
    <li>
      <b class="onglet">Inscription newsletter</b>
      <div class="contenu-onglet-visible-au-survol-de-b" style="display: none">
        <form>
          <label>Entrer votre email on a des trucs géniaux à vous envoyer</label>
          ...
        </form>
      </div>
    </li>
    <li>
      <b class="onglet">Mon compte</b>
      <div class="contenu-onglet-visible-au-survol-de-b" style="display: none">
        <ul>
          <li><a href="#">Mes infos personnelles</a></li>
          ...
        </ul>
      </div>
    </li>
  </ul>
</header>

Est-ce que "Inscription newsletter" ou "Mon compte" mériterait un hn? Je suis dubitatif!

Concernant la nav principale du site, voici un exemple trouvé sur une démo d'un drop-down menu en CSS3 :

<ul class="nav">
  <li>
    <a href="#">What's new</a>
    <div>
      <div class="nav-column">
        <h3>Diapers</h3>
        <ul>
          <li><a href="#">Pampers Diapers</a></li>
          <li><a href="#">Huggies Diapers</a></li>
          ...
        </ul>
      </div>
      <div class="nav-column">
        <h3>Shoes</h3>
        <ul>
          <li><a href="#">Driving shoes</a></li>
          <li><a href="#">Espadrilles</a></li>
          ...
        </ul>
      </div>
    </div>
  </li>
  <li>
  ...
  </li>
</ul>

Toujours sceptique concernant les h3 employés ici, il s'agit d'un menu de navigation (qui plus est doit être suppléé par un sitemap.xml) et donc pourquoi donner de l'importance ici à un élément qui se retrouvera sur chaque page du site?

Bref, je suis peut-être dans l'erreur complète, voire même un peu ayatollah sur les bords, mais ça m'intéresse de confronter mes questions aux expériences d'autres intégrateurs.
D'ici là je jette un oeil aux docs W3C si je trouve quelque chose


EDIT/
Voici une remarque trouvée sur le Mozilla Developer Network :
Évitez de sauter des niveaux de titre : commencez toujours par <h1>, ensuite utilisez <h2> et ainsi de suite. Aussi, essayer d'avoir un seul titre de premier niveau sur une page.
Modifié par wbnet (17 Oct 2013 - 00:27)

Oui ton titre "Inscription newsletter" ou "Mon compte" méritent largement d'utiliser la balise hN. Je ne voit pas en quoi il sont accessoire à ta page.

Pour le menu de navigation à plusieurs niveau donné en exemple, une liste à puces imbtiquée sera peut être plus indiquée.

J'ai l'impression tout de même que tu hésite à cause du seo ? C'est cela ?

Bon, je crois bien avoir été dans l'erreur (du moins concernant les hn dans la navigation) . Dans mes recherches sur le sujet je suis tombé sur la doc W3C de la balise <nav> et voici un des exemples donnés :

<body>
 <header>
    <h1>Wake up sheeple!</h1>
    <p><a href="news.html">News</a> -
      <a href="blog.html">Blog</a> -
      <a href="forums.html">Forums</a></p>
    <p>Last Modified: <span>2009-04-01</span></p>
    <nav>
      <h1>Navigation</h1>
      <ul>
        <li><a href="articles.html">Index of all articles</a></li>
        <li><a href="today.html">Things sheeple need to wake up for today</a></li>
        <li><a href="successes.html">Sheeple we have managed to wake</a></li>
      </ul>
    </nav>
 </header>
 <main>
  <article>
    <header>
      <h1>My Day at the Beach</h1>
    </header>
    <div>
      <p>Today I went to the beach and had a lot of fun.</p>
      ...more content...
    </div>
   <footer>
     <p>Posted <time datetime="2009-10-10">Thursday</time>.</p>
   </footer>
   </article>
   ...more blog posts...
   </main>
   <footer>
     <p>Copyright ©
       <span>2010</span>
       <span>The Example Company</span>
     </p>
     <p><a href="about.html">About</a> -
       <a href="policy.html">Privacy Policy</a> -
       <a href="contact.html">Contact Us</a>
     </p>
 </footer>
</body>

Je pense que l'exemple donné est volontairement caricatural mais ça n'en rend pas moins le message plus explicite : tout est question de scope. Un h1 dans une balise <nav> n'a pas le même impact qu'un h1 dans <body>.

Voici une conversation intéressante sur StackExchange : http://webmasters.stackexchange.com/questions/6923/should-menu-titles-h1-h2-h3-be-inside-or-outside-the-nav-tag
L'échange en bas de page sur la seconde réponse proposée est révélateur.
Modifié par wbnet (17 Oct 2013 - 11:02)

a écrit :

Je pense que l'exemple donné est volontairement caricatural mais ça n'en rend pas moins le message plus explicite : tout est question de scope. Un h1 dans une balise <nav> n'a pas le même impact qu'un h1 dans <body>.

Ca dépend. C'est vrai seulement si on utilise le nouveau modèle de titrage HTML5. On a aussi le droit d'utiliser le modèle classique HTML4 dans lequel tous ces titres H1 sont égaux.

Par ailleurs, le nouveau modèle de titrage HTML5 peut poser des problèmes avec certaines combinaisons de lecteurs d'écran et navigateurs (notamment ceux qui commencent à dater) ! Pour la'ccessibilité aux lecteurs d'écran, je conseillerais donc de ne pas passer au nouveau système et de lever toutes les ambiguïtés en ajoutant role="heading" et aria-level="X"

Par rapport à mon post de ce matin, je voulais ajouter quelque chose. Je vais me faire fusiller par les puristes, et les validateurs me traitent déjà de mauvais élève, mais bon... c'est une astuce qui fonctionne diablement bien et qui ne peut être obtenue qu'en transgressant légèrement les règles. Quand on sait pourquoi on le fait, c'est pas grave de ne pas être 100% valide.

Si on combine le <h1> stratégiquement placé juste avant le début du contenu réel, que c'est le seul <h1> de la page, et qu'à ça on ajoute un ou plusieurs <h2> dans la navigation, on se retrouve dans un cas extrêmement pratique avec les lecteurs d'écran: une pression sur la touche 1 avec jaws et NVDA amène immédiatement sur le contenu, et une pression sur 2 ou H amène directement à la navigation située avant, si on suppose que le curseur virtuel se trouvait au tout début de la page. Redoutablement efficace !

A ma connaissance, il n'y a que blog&blues qui utilisait ce petit truc et qui osait braver les avertissements; je n'ai jamais vu un autre site que les miens faire ça depuis...
Modifié par QuentinC (17 Oct 2013 - 14:13)