web-dev-qa-db-fra.com

Sémantique HTML5 - H1 ou H2 pour les titres ARTICLE dans une SECTION

D'après ce que j'ai compris (d'après ce chapitre de Dive in HTML5: http://goo.gl/9zliD ), il peut être considéré comme sémantiquement approprié d'utiliser des balises H1 dans plusieurs zones de la page, en tant que 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 de '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 des articles sont les titres les plus importants pour leur ARTICLE, mais sont aussi 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>
html5semantic-web
10
Matt

Le pèlerin n'est pas le seul à l'affronter.

Selon Jeremy Keith HTML5 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 du livre électronique (acheté auprès d'iBooks)

Jusqu'ici, le nouveau contenu de la section ne nous en dit pas beaucoup plus que ce que nous pouvions faire avec les versions précédentes du HTML. Voici le kicker: En HTML5, chaque morceau de contenu de sectionnement a son propre plan autonome. Cela signifie que vous n’avez pas à suivre le niveau de cap que vous devriez utiliser, vous pouvez simplement commencer à 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)

7
Yahel

J'aurais tendance à être d'accord avec l'interprétation de Mark Pilgrim . Si vous insérez votre article dans un élément article, vous pouvez alors recommencer avec un en-tête h1 pour l'article.

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

Si les en-têtes d'article doivent être une continuation de la hiérarchie des en-têtes de document, lorsque vous déposez le article directement sous une balise body, vous devez accéder à h1, mais en le déposant 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 une nouvelle section ou article, vous devez 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 est simplement un élément d'en-tête (par exemple, h1) et rien d'autre, vous n'avez pas besoin de l'envelopper dans un élément header.

2
Lèse majesté

Bien que les titres des articles de votre page soient importants, c'est généralement l'en-tête de la page qui définit le contenu de la page. Parfois, c'est le nom de l'article et parfois, comme vous le montrez, 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.

0
Richard Testani