Come utilizzare correttamente il tag "sezione" in HTML5?

Sto cercando di creare un layout in HTML5 e dopo aver letto diversi articoli sono solo confuso. Sto cercando di ottenere qualche input su come dovrebbe essere utilizzato.

Di seguito sono riportate le variazioni con cui vado avanti e indietro:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

Puoi usare il tag di sezione per agire come un contenitore?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

Qual è il metodo corretto per utilizzare il <section>tag?

La risposta è nelle specifiche attuali:

L'elemento sezione rappresenta una sezione generica di un documento o di un'applicazione. Una sezione, in questo contesto, è un raggruppamento tematico di contenuti, tipicamente con un'intestazione.

Esempi di sezioni potrebbero essere i capitoli, le varie pagine con schede in una finestra di dialogo con schede o le sezioni numerate di una tesi. La home page di un sito Web potrebbe essere suddivisa in sezioni per un'introduzione, notizie e informazioni di contatto.

Gli autori sono incoraggiati a utilizzare l'elemento articolo invece dell'elemento sezione quando avrebbe senso sindacare i contenuti dell'elemento .

L' elemento sezione non è un elemento contenitore generico . Quando un elemento è necessario per scopi di stile o per comodità di scripting, gli autori sono incoraggiati a utilizzare l'elemento div. Una regola generale è che l'elemento sezione è appropriato solo se il contenuto dell'elemento sarebbe elencato esplicitamente nella struttura del documento .

Riferimento:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Vedi anche:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

Sembra che ci sia stata molta confusione riguardo al proposito di questo elemento, ma l'unica cosa che è concordato è che è non è un wrapper generico, come <div>è. Dovrebbe essere usato per scopi semantici, e non come hook CSS o JavaScript (sebbene possa certamente avere uno stile o uno "script").

Un esempio migliore, dalla mia comprensione, potrebbe assomigliare a questo:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Si noti che <div>, essendo completamente non semantico, può essere utilizzato ovunque nel documento che le specifiche HTML lo consentono, ma non è necessario.

Nella pagina wiki W3 sulla strutturazione di HTML5 , dice:

<section>: Utilizzato per raggruppare diversi articoli in diversi scopi o argomenti, o per definire le diverse sezioni di un singolo articolo.

E poi mostra un'immagine che ho ripulito:

È anche importante sapere come utilizzare il <article>tag (dallo stesso collegamento W3 sopra):

<article>è correlato a <section>, ma è nettamente diverso. Mentre <section>serve per raggruppare sezioni distinte di contenuto o funzionalità, <article>serve per contenere singole parti di contenuto indipendenti correlate, come singoli post di blog, video, immagini o notizie. Pensala in questo modo: se hai un numero di elementi di contenuto, ognuno dei quali sarebbe adatto per la lettura da solo e avrebbe senso sindacare come elementi separati in un feed RSS, allora <article>è adatto per contrassegnarli.

Nel nostro esempio, <section id="main">contiene voci di blog. Ogni post del blog sarebbe adatto per essere pubblicato come elemento in un feed RSS e avrebbe senso se letto da solo, fuori contesto, quindi <article>è perfetto per loro:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Semplice eh? Tieni presente però che puoi anche nidificare sezioni all'interno degli articoli, dove ha senso farlo. Ad esempio, se ognuno di questi post del blog ha una struttura coerente di sezioni distinte, puoi inserire anche sezioni all'interno dei tuoi articoli. Potrebbe assomigliare a questo:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

La mia comprensione è che SEZIONE contiene una sezione con un'intestazione che è una parte importante del "flusso" della pagina (non una parte). Le SEZIONI sarebbero capitoli, parti numerate di documenti e così via.

ARTICLE è per contenuti sindacati, ad esempio post, notizie, ecc. ARTICLE e SECTION sono completamente separati - puoi averne uno senza l'altro in quanto sono casi d'uso molto diversi.

Un altro aspetto di SECTION è che non dovresti usarlo se la tua pagina ha solo una sezione. Inoltre, ogni sezione deve avere un'intestazione (H1-6, HGROUP, HEADING). I titoli sono "individuati" all'interno della SEZIONE, quindi, ad esempio, se si utilizza un H1 nella pagina principale (al di fuori di una SEZIONE) e quindi un H1 all'interno della sezione, quest'ultima verrà trattata come H2.

Gli esempi nelle specifiche sono abbastanza buoni al momento della scrittura.

Quindi nel tuo primo esempio sarebbe corretto se avessi diverse sezioni di contenuto che non possono essere descritte come ARTICOLI. (Con un punto minore che non avresti bisogno del DIV #primary a meno che non lo volessi per un hook di stile - i tag P sarebbero migliori).

Il secondo esempio sarebbe corretto se avessi rimosso tutti i tag SECTION: i dati in quel documento sarebbero articoli, post o qualcosa del genere.

Le SEZIONI non devono essere utilizzate come contenitori: DIV è ancora l'uso corretto per questo e qualsiasi altra scatola personalizzata che potresti inventare.

Puoi sicuramente usare il tag di sezione come contenitore. È lì per raggruppare i contenuti in un modo semanticamente più significativo rispetto a un div o come dice la specifica html5:

L'elemento sezione rappresenta una sezione generica di un documento o di un'applicazione. Una sezione, in questo contesto, è un raggruppamento tematico di contenuti, tipicamente con un'intestazione. http://www.w3.org/TR/html5/sections.html#the-section-element

Il metodo corretto è il n. 2. Hai utilizzato il tag di sezione per definire una sezione del documento. Dalle specifiche http://www.w3.org/TR/html5/sections.html :

L'elemento sezione non è un elemento contenitore generico. Quando un elemento è necessario per scopi di stile o per comodità di scripting, gli autori sono incoraggiati a utilizzare invece l'elemento div

è semplicemente sbagliato: non è un wrapper. L'elemento denota una sezione semantica del contenuto per aiutare a costruire una struttura del documento. Dovrebbe contenere un'intestazione. Se stai cercando un elemento wrapper di pagina (per qualsiasi tipo di HTML o XHTML), considera l'applicazione degli stili direttamente all'elemento come descritto da Kroc Camen. Se hai ancora bisogno di un elemento aggiuntivo per lo styling, usa un file. Come spiega il dottor Mike, div non è morto e se non c'è nient'altro di più appropriato, probabilmente è dove vuoi veramente applicare il tuo CSS.

puoi controllare questo: http://html5doctor.com/avoiding-common-html5-mistakes/