web-dev-qa-db-fra.com

Est-il acceptable que chaque publication utilise une balise <h1> pour une page qui répertorie plusieurs articles de blog?

La page Posts contient plusieurs balises <h1> (une pour chaque message). Il n'y a presque pas de balises <h2> sur la page.

Pensez-vous qu'il est acceptable d'avoir plusieurs balises <h1> si chacune de ces balises a la même importance?

3
Fahad Uddin

La réponse est non. Il ne devrait y avoir qu'un seul élément <h1> sur une page. Et, chose intéressante, il y avait n article qui est sorti aujourd'hui à ce sujet jusqu'à son utilisation avec <section>.

Dans tous les cas, les navigateurs traitent toujours <h1> comme en-tête de la page entière.

1
Rob

Si vous avez plusieurs articles de blog (que ce soit avec le texte intégral ou juste des teasers) sur une page, chaque article doit avoir son propre élément article.

Le premier élément de titre (h1-h6) dans la article (et non imbriqué dans un autre élément de contenu de sectionnement) sera le titre de cet article.

HTML 5.1 permet aux auteurs d'utiliser h1 tout le temps, mais il recommande que les auteurs utilisent

[…] Titres du rang approprié pour le niveau de nidification de la section.


Les extraits suivants montrent ce qui est recommandé:

<body>

  <article>
    <h2></h2>
    <!-- 
      <h2> because the <article> is on the second level
      (<body> being the first one) 
    -->
  </article>

  <article>
    <h2></h2>
  </article>

</body>
<body>

  <section>

    <article>
      <h3></h3>
      <!-- 
        <h3> because the <article> is on the third level
        (<body> being the first one, <section> being the second one) 
      -->
    </article>

    <article>
      <h3></h3>
    </article>

  </section>

</body>
<body>

  <div>

    <article>
      <h2></h2>
      <!-- 
         <h2> because the <article> is on the second level
         (<body> being the first one);
         as <div> is not a sectioning content element,
         it doesn’t represent a nesting level for the outline  
      -->
    </article>

    <article>
      <h2></h2>
    </article>

  </div>

</body>

Mais dans ces trois exemples, il serait valide d'utiliser h1 (ou tout autre élément d'en-tête).

1
unor