Semantica HTML5 - H1 o H2 per i titoli ARTICLE in una SEZIONE

È mia comprensione (basato su questo capitolo di Immersione in HTML5: http://goo.gl/9zliD ) che può essere considerato semanticamente appropriato usare i tag H1 in più aree della pagina, come metodo per impostare il titolo più importante per quel particolare contenuto.

Se sto usando questa metodologia e ho una SEZIONE a cui ho assegnato un H1 di "Articoli", dovrei usare H1 o H2 per definire i titoli degli ARTICOLI in quella SEZIONE? Questo mi confonde un po 'poiché i titoli degli articoli sono il titolo più importante per il loro ARTICOLO, ma sono anche "figli" del titolo della SEZIONE.

Codice di esempio:

<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>

Il pellegrino non è il solo a contenderlo.

Secondo HTML5 di Jeremy Keith per i Web designer , è possibile utilizzare più messaggi <h1>in un documento senza rovinare il riepilogo del documento, purché siano nidificati all'interno di tag di sezione semantica discreti.

Citando direttamente dall'eBook (che ho acquistato da iBooks)

Finora, il nuovo contenuto della sezione non ci offre molto di più di quello che potremmo fare con le versioni precedenti di HTML. Ecco il kicker: in HTML5, ogni parte del contenuto della sezione ha una propria struttura autonoma. Ciò significa che non devi tenere traccia del livello di rotta che dovresti utilizzare, puoi iniziare da h1 ogni volta:

<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>

(Codice di esempio anche dal libro, pagina 73)

Tendo a concordare con l' interpretazione di Mark Pilgrim . Se racchiudi il tuo articolo all'interno di un articleelemento, puoi ricominciare da capo con h1un'intestazione per l'articolo.

Nelle specifiche HTML5, articlesi suppone che s siano trattati come una parte indipendente e indipendente della pagina. Dovresti essere in grado di trapiantare l' articleelemento così com'è in un'altra pagina senza riformattare le intestazioni.

Se le intestazioni degli articoli dovessero essere una continuazione della gerarchia delle intestazioni del documento, quando si rilascia il articledirettamente sotto un bodytag, è necessario andare a h1, ma se lo si rilasciava in sezioni nidificate, è necessario modificarlo in h3/ h4/ h5/ ecc., a seconda di dove lo si posiziona.

In effetti, ogni volta che crei un nuovo sectiono article, dovresti tornare indietro h1, poiché i seguenti sono identici:

<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>

e:

<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>

Come nota a margine, se l'intestazione è solo un elemento di intestazione (ad esempio h1) e nient'altro, non è necessario avvolgerlo in un headerelemento.

Mentre i titoli degli articoli della tua pagina sono importanti, generalmente l'intestazione di livello superiore della pagina definisce il contenuto della pagina. A volte è il nome dell'articolo e, a volte, come si mostra è il titolo di un elenco di articoli.

<h1>My Very Interesting Articles</h1>

Questa intestazione definisce l'intera pagina come "articoli interessanti". Quindi ogni articolo viene elencato ma ha un livello di intestazione inferiore.

La risposta ufficiale di w3schools all'uso dei tag di intestazione su una pagina è la seguente: le intestazioni H1 dovrebbero essere usate come intestazioni principali, seguite dalle intestazioni H2, quindi dalle intestazioni H3 meno importanti e così via.