web-dev-qa-db-fra.com

Devrions-nous utiliser <nav> pour la navigation globale puisqu'il s'agit de la section de contenu?

Contexte

En termes de référencement, <h1> devrait être utilisé uniquement comme contenu spécifique à une page et nous devrions éviter de l'utiliser pour le logotype du site. Ainsi, une structure de page d'accueil actuelle devrait être quelque chose comme:

<body>
<header>
  <p><img id="logo">
  <nav>
    <ul></ul>
  </nav>
</header>
<main>
  <h1>Homepage</h1>
  <!-- Content -->
</main>
<footer>
  <nav>
    <ul></ul>
  </nav>
  <p>Copyright
</footer>

Mais le code ci-dessus donnait ce contour en HTML5 outliner :

  1. Page d'accueil
    1. Section sans titre (nav)
    2. Section sans titre (nav)

Le problème

Puisque <nav> est une section de contenu, devrions-nous éviter de l'utiliser pour la navigation globale car logiquement, il ne s'agit pas d'une navigation dans la page?

seohtml5headingh1
3
Fong-Wan Chau

Dans html5, l'élément nav doit être utilisé pour représenter une section d'une page qui renvoie à

  • d'autres pages ou
  • aux parties dans la page

Donc, en fonction du type de liens que vous spécifiez dans la section de pied de page, vous pouvez éviter de les insérer dans un élément nav:

Tous les groupes de liens d'une page ne doivent pas nécessairement se trouver dans un élément de navigation - l'élément est principalement destiné aux sections composées de blocs de navigation principaux. En particulier, il est courant que les pieds de page aient une courte liste de liens vers différentes pages d’un site, telles que les conditions de service, la page d’accueil et une page de copyright. L'élément de pied de page suffit à lui seul dans de tels cas; bien qu'un élément de navigation puisse être utilisé dans de tels cas, il est généralement inutile

3
marcanuy

Le contour de votre exemple

Le contour généré par https://gsnedders.html5.org/outliner/ n'est pas correct.

Le contour correct de votre exemple de balisage est le suivant:

1. Document (<body> without heading)
  1.1. Navigation (<nav> without heading)
2. "Homepage" (implicit section opened by <h1>)
  2.1. Navigation (<nav> without heading)

Je recommande le "HTML5 Outliner" pour vérifier votre aperçu, ou le validateur W3C (cocher "aperçu").

(Voir https://github.com/hoyois/html5outliner/issues/7 pour plus de détails sur les raisons pour lesquelles le contour que vous avez cité n'est pas correct.)

Contenu lié au site ou contenu lié à la page

Votre observation est correcte: le mélange de sections liées à la page et de sections liées au site peut être problématique. Mais justement à cause de cela, le conseil selon lequel le contenu principal doit avoir un h1 n’est pas un bon conseil si vous vous souciez du contour.

Une page d'un site Web typique comporte des parties couvrant l'ensemble du site, telles que l'en-tête, la navigation et le pied de page. Pour les obtenir dans le cadre d'un en-tête, vous devez utiliser l'en-tête de la racine de sectionnement body, qui représente ensuite le site.

<body>
  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
  </header>

  <main>
  </main>

  <footer>
  </footer>
</body>

Maintenant, le document a un en-tête ("Exemple de site"), et sauf si vous ajoutez un autre h1 à la body racine de sectionnement , ce sera la seule entrée de niveau supérieur dans l’esquisse - tout le reste sera dans son champ d’application.

Nous pouvons maintenant ajouter un nav (pour la navigation sur l'ensemble du site):

  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
    <nav></nav>
  </header>

(Il est important que la nav, ou toute autre section, vienne après l’en-tête body-.)

Et un article (si le contenu principal de cette page est, par exemple, une publication sur un blog):

  <main>
    <article></article>
  </main>

L'en-tête de l'article peut être un h1, mais HTML5 recommande d'utiliser des éléments d'en-tête du rang correspondant (en fonction de votre utilisation d'éléments de sectionnement), c'est-à-dire h2 dans ce cas. .

  <main>
    <article>
      <h2>Example Article</h2>
    </article>
  </main>

Résultat

Cela donne:

<body>
  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
    <nav></nav>
  </header>

  <main>
    <article>
      <h2>Example Article</h2>
    </article>
  </main>

  <footer>
  </footer>
</body>

et le contour est

1. "Example Site"
  1.1. Navigation (<nav> without heading)
  2.2. "Example Article"

Quelle serait l'alternative?

Si vous n'êtes pas convaincu que le nom du site doit correspondre à l'en-tête du document (c.-à-d. Le h1 du body), notez que HTML5 encourage les auteurs à utiliser les éléments de contenu en sections (article, aside, nav, section) explicitement .

Si vous utilisez article pour (par exemple) une publication de blog, en tant qu'enfant de body, vous avez par définition une entrée de plan de deuxième niveau. Vous ne pouvez obtenir une entrée de niveau supérieur que si vous ne suivez pas la recommandation (c’est-à-dire que vous n’utilisez pas article).

Si vous avez une navigation sur l'ensemble du site dans nav, cela serait dans la portée de cette entrée de niveau supérieur (si elle vient après la publication du blog), ou dans la portée d'un en-tête de document sans titre (si elle vient avant la publication de blog). La première variante est fausse (la navigation sur l'ensemble du site n'a rien à voir avec la publication de blog), la seconde n'est pas idéale, car vous avez plusieurs entrées de niveau supérieur et la première n'a pas d'étiquette.

Si vous cessiez d'utiliser nav, votre navigation resterait dans la portée d'un en-tête. Cela ferait soit partie de l'entrée de document sans étiquette, soit une partie du contenu principal. Les deux n'est, bien sûr, pas idéal.

Donc, mon conseil basé sur la recommandation HTML5 du W3C:

  • Utilisez un h1 (pour la racine de sectionnement body) avec le nom/logo de votre site.
  • Utilisez nav pour votre navigation (sur le site comme sur la page), utilisez article/section pour votre contenu.
  • Donnez à chaque article/section un élément de tête (commençant par h2).
2
unor

Cela dépend si le site Web que vous créez est un SPA ou entièrement du côté serveur. Vous pouvez utiliser le pour un SPA, car il n’aurait pas besoin de le recharger lorsque vous accédez aux sections principales/secondaires. Je pense que le webcrawler de Google est construit pour donner la priorité au second uniquement au contenu. Voir http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

1
bydeinon

Pourquoi avez-vous utilisé <h1> sur votre page d'accueil? Les balises d'en-tête doivent être utilisées pour les titres de texte importants de votre page.

Pour le pied de page, vous pouvez utiliser une navigation différente, telle que la création de liens vers d’autres pages telles que la page Facebook, la chaîne YouTube et toute autre page utile à vos téléspectateurs.

Ne mettez tout simplement pas la même navigation dans votre en-tête, car vous répétez littéralement la navigation, ce qui peut vous nuire par le biais de liens de sites.

0
Tony Logarta