HTML5 Semantics - H1 ou H2 pour les titres ARTICLE dans une SECTION

Je crois comprendre (basé sur ce chapitre de Plonger dans HTML5: http://goo.gl/9zliD ) qu'il peut être considéré sémantiquement approprié d'utiliser des balises H1 dans plusieurs zones de la page, comme méthode de définition du titre le plus important pour ce contenu particulier.

Si j'utilise cette méthodologie et que j'ai une SECTION à laquelle j'ai attribué un H1 d '«Articles», dois-je utiliser H1 ou H2 pour définir les titres des ARTICLES dans cette SECTION? C'est un peu déroutant pour moi car les titres d'articles sont la rubrique la plus importante de leur ARTICLE, mais sont également des «enfants» du titre de la SECTION.

Exemple de code:

<section class="article-list">
  <header>
    <h1>Articles</h1>
  </header>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="201-02-01">Today</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-31">Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-30">The Day Before Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>
</section>

Pilgrim n'est pas le seul à contester cela.

Selon HTML5 pour Jeremy Keith pour les concepteurs Web , vous pouvez utiliser plusieurs <h1>s dans un document sans ruiner le résumé du document, tant qu'ils sont imbriqués dans des balises sectionnelles sémantiques discrètes.

Citant directement à partir de l'eBook (que j'ai acheté sur iBooks)

Jusqu'à présent, le nouveau contenu de sectionnement ne nous donne pas beaucoup plus que ce que nous pourrions faire avec les versions précédentes de HTML. Voici le kicker: en HTML5, chaque élément de contenu de section a son propre contour autonome. Cela signifie que vous n'avez pas à suivre le niveau de cap que vous devez utiliser - vous pouvez simplement commencer à partir de h1 à chaque fois:

<h1>An Event Apart</h1> 
    <section>
        <header>
            <h1>Cities</h1>
        </header>
         <p>Join us in these cities in 2010.</p> 
        <section>
            <header>
                <h1>Seattle</h1>
            </header>
            <p>Follow the yellow brick road.</p> 
       </section>
        <section>
            <header>
                <h1>Boston</h1>
            </header>
            <p>That’s Beantown to its friends.</p> 
        </section> 
        <section>
             <header>
                   <h1>Minneapolis</h1>
             </header>
             <p>It's so <em>nice</em>.</p> 
         </section>
     </section> 
     <small>Accommodation not provided.</small>

(Exemple de code également tiré du livre, page 73)

J'aurais tendance à être d 'accord avec l' interprétation de Mark Pilgrim . Si vous enfermez votre article à l'intérieur d'un articleélément, vous pouvez recommencer avec un h1titre pour l'article.

Dans la spécification HTML5, les articles sont censés être traités comme une partie indépendante et autonome de la page. Vous devriez pouvoir transplanter l' articleélément tel quel dans une autre page sans reformater les en-têtes.

Si les en-têtes d'article devaient être une continuation de la hiérarchie des en-têtes de document, alors lorsque vous déposez le articledirectement sous une bodybalise, vous devez aller à h1, mais si vous le déposez sous des sections imbriquées, vous devrez le changer en h3/ h4/ h5/ etc., selon l'endroit où vous le placez.

En fait, chaque fois que vous créez un nouveau sectionou article, vous devez y revenir h1, car les éléments suivants sont identiques:

<article>
  <h1>Meta Data</h1>
    <h2>Data Warehousing</h2>
    <h2>On the Web</h2>
      <h3>Dublin Core</h3>
      <h3>XFN</h3>
      <h3>Microformats</h3>
      <h3>RDFa</h3>
</article>

et:

<article>
  <h1>Meta Data</h1>
  <section>
    <h1>Data Warehousing</h1>
  </section>
  <section>
    <h1>On the Web</h1>
    <section>
      <h1>Dublin Core</h1>
    </section>
    <section>
      <h1>XFN</h1>
    </section>
    <section>
      <h1>Microformats</h1>
    </section>
    <section>
      <h1>RDFa</h1>
    </section>
  </section>
</article>

En remarque, si votre en-tête n'est qu'un élément de titre (par exemple h1) et rien d'autre, vous n'avez pas besoin de l'envelopper dans un headerélément.

Bien que les titres d'articles de votre page soient importants, généralement l'en-tête de niveau supérieur de la page définit le contenu de la page. Parfois, c'est le nom de l'article, et parfois, comme vous le montrez, c'est le titre d'une liste d'articles.

<h1>My Very Interesting Articles</h1>

Cette rubrique définit la page entière comme des «articles intéressants». Ensuite, chaque article est répertorié mais a un niveau de titre inférieur.

La réponse officielle de w3schools à l'utilisation des balises de titre sur une page est la suivante: les titres H1 doivent être utilisés comme titres principaux, suivis des titres H2, puis des titres H3 moins importants, et ainsi de suite.