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)

Salut,

En même, le site que tu mentionnes n'est pas un bon exemple de hiérarchie pertinente des h1 à h6, puisqu'on commence par un h2, que le logo de ce fameux titre de presse n'est pas contenu dans un hN (alors qu'il devrait l'être) et que j'ai même repéré un h2 vide ! Bref, j'ose espérer que Kaelig fait un travail de meilleure qualité…

Pour revenir à ta question, à partir du moment où, dans ton header ou dans ton footer (pour les menus de navigation du site, ça dépend du contexte), tu as du texte qui introduit une section, il faut employer l'élément hN, N étant à remplacer par le niveau approprié selon le contexte hiérarchique. L'intérêt sémantique est de dire : ceci est un titre de tel niveau (d'ailleurs, si tu parles de « pseudo-titres », c'est que le titre te démange, pour ainsi dire ). Et si tu n'en es pas convaincu, sache que les utilisateurs de lecteur d'écran (qu'ils soient aveugles, malvoyants ou dyslexiques) ont la possibilité de lister l'ensemble des hN présents dans la page Web consultée et de naviguer hN par hN.

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)

Merci pour ta réponse détaillée!