web-dev-qa-db-fra.com

Quel devrait être le bon tag h1?

J'ai deux balises <h1> sur un site Web.

  1. Chaque page est le logo du site

  2. Le titre de l'article de la page.

Je sais qu’avoir plus d’une balise <h1> par page est une mauvaise pratique. Dois-je retirer la balise <h1> du logo?

seoh1
2
Fahad Uddin

Oui, supprimez la balise h1 du logo. Une erreur courante consiste à l'utiliser simplement pour utiliser son style, mais cela n'a aucun sens d'un point de vue sémantique.

Un élément h1 représente l'en-tête avec le rang le plus élevé pour une section. Il est donc logique de l'utiliser pour un titre.

3
marcanuy

Si vous vous souciez du HTML sémantique et du contour du document, il est logique d'utiliser h1 pour le logo (en supposant que le logo représente le nom du site).

Pourquoi? Voir les trois prochaines étapes.

1. Sans en-têtes

Un document HTML5 simple et commun, sans en-tête, pourrait ressembler à ceci:

<body>
  <header><!-- site-wide header --></header>
  <main><article><!-- page-specific main content --></article></main>
  <nav><!-- site-wide navigation --></nav>
  <footer><!-- site-wide footer --></footer>
</body>

Nous avons trois sections ici:

  1. La body (racine de sectionnement)
  2. Le article
  3. Le nav

Dans l'aperçu du document, chaque section reçoit une entrée (qui équivaut sémantiquement à un en-tête). Donc, le contour, sans utiliser d’éléments de titre, est:

1. untitled <body>
  1.1 untitled <article>
  1.2 untitled <nav>

2. Avec en-têtes pour article et nav

Donnons maintenant à la article un en-tête. Peu importe lequel, mais HTML5 recommande d'utiliser un élément d'en-tête qui correspond au niveau d'imbrication, c'est-à-dire h2 dans ce cas: <h2>My first blog post</h2>.

Et pour les besoins de cet exemple, donnons également à nav un en-tête (h2 pour les mêmes raisons), bien qu'il n'en ait généralement pas besoin si c'est la seule navigation: <h2>Navigation</h2>

Donc nous avons:

<body>
  <header><!-- site-wide header --></header>
  <main>
    <article>
      <h2>My first blog post</h2>
    </article>
  </main>
  <nav>
    <h2>Navigation</h2>
  </nav>
  <footer><!-- site-wide footer --></footer>
</body>

Le plan du document ne change pas, il n’obtient que les étiquettes:

1. untitled <body>
  1.1 "My first blog post"
  1.2 "Navigation"

3.… et pour body

Mais qu'en est-il de l'entrée sans titre body? Elle est longue pour un en-tête! Quelle rubrique pourrait-il éventuellement prendre? Le nom du site! Pourquoi? Car la page ne contient pas uniquement du contenu spécifique à la page (comme le contenu principal), mais également du contenu couvrant l’ensemble du site (comme l’en-tête, le pied de page et la navigation). Et un titre de site nous permet de le représenter dans l’esquisse.

Ainsi, l'en-tête de la racine de sectionnement body serait généralement le nom du site (<h1>Alice’s blog</h1>), qui peut bien entendu être également un logo (<h1><img src="logo.png" alt="Alice’s blog" /></h1>).

Cela nous donne:

<body>
  <header>
    <h1><img src="logo.png" alt="Alice’s blog" /></h1>
  </header>
  <main>
    <article>
      <h2>My first blog post</h2>
    </article>
  </main>
  <nav>
    <h2>Navigation</h2>
  </nav>
  <footer><!-- site-wide footer --></footer>
</body>

Quels résultats dans ce contour:

1. "Alice’s blog"
  1.1 "My first blog post"
  1.2 "Navigation"

Mes réponses aux questions connexes:

1
unor