Sezione vs articolo HTML5

Ho una pagina composta da varie "sezioni" come video, un newsfeed ecc. Sono un po 'confuso su come rappresentarli con HTML5. Attualmente li ho come HTML5 <section>, ma a un'ulteriore ispezione sembra che il tag più corretto sarebbe <article>. Qualcuno potrebbe far luce su questo per me?

Nessuna di queste cose sono post di blog o "documenti" nel vero senso della parola, quindi è difficile vedere quale elemento applicare.

Saluti

EDIT: Ho scelto di utilizzare il articletag poiché sembra essere un tag contenitore per elementi non correlati che immagino siano le mie "sezioni". L'attuale articolo di tagname sembra tuttavia essere piuttosto fuorviante e sebbene stiano dicendo che HTML5 è stato sviluppato con maggiore considerazione per le applicazioni web , trovo che molti dei tag siano più incentrati sui blog / basati su documenti.

Comunque grazie per le tue risposte sembra essere abbastanza soggettivo.

Nella pagina wiki W3 sulla strutturazione di HTML5 , si dice:

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

E quindi visualizza un'immagine che ho ripulito:

Descrive anche come utilizzare il <article>tag (dallo stesso link W3 sopra):

<article>è correlato <section>, ma è nettamente diverso. Considerando che <section>è per raggruppare sezioni distinte di contenuto o funzionalità, <article>è per contenere singoli singoli contenuti correlati, come singoli post di blog, video, immagini o notizie. Pensala in questo modo: se hai un certo 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, quindi <article>è adatto per contrassegnarli.

Nel nostro esempio, <section id="main">contiene voci di blog. Ogni post del blog sarebbe adatto per la sindacazione come elemento in un feed RSS e avrebbe senso se letto da solo, fuori dal 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, tuttavia, che puoi anche nidificare le 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, è possibile 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>

Sembra che dovresti avvolgere ciascuna delle "sezioni" (come le chiami) in <article>tag e voci nell'articolo in <section>tag.

La specifica HTML5 dice (Sezione):

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

Esempi di sezioni sono i capitoli, le varie pagine a schede in una finestra di dialogo a 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.

Nota : gli autori sono incoraggiati a utilizzare l'elemento dell'articolo anziché l'elemento della sezione quando ha senso sindacare il contenuto dell'elemento.

E per l' articolo

L'elemento articolo rappresenta una composizione autonoma in un documento, una pagina, un'applicazione o un sito e che, in linea di principio, è distribuibile o riutilizzabile in modo indipendente, ad esempio in sindacato. Potrebbe trattarsi di un post sul forum, un articolo di una rivista o di un giornale, un post di blog, un commento inviato dall'utente, un widget o gadget interattivo o qualsiasi altro contenuto indipendente.

Penso che quelle che chiamate "sezioni" nell'OP corrispondano alla definizione dell'articolo in quanto posso vederle essere distribuibili o riutilizzabili in modo indipendente .

Aggiornamento: Alcune modifiche di testo minore per articlenegli ultimi redattori bozza per HTML 5.1 (modifiche in corsivo):

L'elemento articolo rappresenta una composizione completa o autonoma in un documento, una pagina, un'applicazione o un sito e che, in linea di principio, è distribuibile o riutilizzabile in modo indipendente, ad esempio in sindacato. Potrebbe trattarsi di un post sul forum, un articolo di una rivista o di un giornale, un post di blog, un commento inviato dall'utente, un widget o gadget interattivo o qualsiasi altro contenuto indipendente.

Inoltre, discussione sulla mailing list HTML pubblica articledi gennaio e febbraio 2013.

Userei <article>per un blocco di testo totalmente estraneo agli altri blocchi della pagina. <section>d'altra parte, sarebbe un divisore per separare un documento che sono collegati tra loro.

Ora, non sono sicuro di ciò che hai nei tuoi video, newsfeed, ecc., Ma ecco un esempio (non c'è REAL vero o sbagliato, solo una guida su come uso questi tag):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

Come puoi vedere, le sezioni sono ancora rilevanti l'una con l'altra, ma finché si trovano all'interno di un blocco che le raggruppa. Le sezioni NON devono essere all'interno degli articoli. Possono essere nel corpo di un documento, ma io uso sezioni del corpo, quando l'intero documento è un articolo.

per esempio

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

Spero che abbia senso.

Mi piace attenermi al significato standard delle parole usate: An articlesi applicherebbe, beh, agli articoli. Definirei post di blog, documenti e articoli di notizie come articles. Le sezioni invece, farebbero riferimento agli elementi layout / ux: barra laterale, intestazione, piè di pagina sarebbero sezioni. Tuttavia questa è tutta una mia interpretazione personale - come hai sottolineato, le specifiche per questi elementi non sono ben definite.

A supporto di ciò, il w3c definisce un articleelemento come una sezione di contenuto che può essere indipendente da solo. Un post sul blog potrebbe essere considerato un elemento di contenuto prezioso e consumabile. Tuttavia, un'intestazione no.

Ecco un articolo interessante sulla follia di un uomo nel tentativo di differenziare i due nuovi elementi. Il punto fondamentale dell'articolo, che anch'io ritengo corretto, è cercare di usare qualsiasi elemento che ritieni migliore rappresenti effettivamente ciò che contiene.

La cosa più problematica è che l'articolo e la sezione sono molto simili. Tutto ciò che li separa è la parola "autonomo". Decidere quale elemento usare sarebbe facile se ci fossero delle regole rigide e veloci. Invece, è una questione di interpretazione. Puoi avere più articoli all'interno di una sezione, puoi avere più sezioni all'interno e un articolo, puoi nidificare sezioni all'interno di sezioni e articoli all'interno di sezioni. Sta a te decidere quale elemento è il più semanticamente appropriato in una determinata situazione.

Ecco un'ottima risposta alla stessa domanda qui su SO

Il diagramma di flusso seguente può essere di aiuto nella scelta di uno dei vari elementi HTML5 semantici:

Sezione

• Usalo per definire una sezione del tuo layout. Potrebbe essere mid, left, right , ecc ..
• Questo ha un significato di connessione con qualche altro elemento, in parole povere, è DIPENDENTE.

Articolo

• Usa questo dove hai contenuti indipendenti che hanno senso da soli.

• L'articolo ha il suo significato completo.

Una sezione è fondamentalmente un wrapper per h1(o altri htag) e il contenuto che corrisponde a questo. Un articleè essenzialmente un documento all'interno del tuo documento che viene ripetuto o impaginato ... come ogni post di blog sul tuo documento può essere un articolo, o ogni commento sul tuo documento può essere un articolo.

inoltre, per i contenuti sindacati "Gli autori sono incoraggiati a utilizzare l'elemento dell'articolo anziché l'elemento della sezione quando avrebbe senso sindacare il contenuto dell'elemento."

La mia interpretazione è: penso a YouTube che ha una sezione commenti e all'interno della sezione commenti ci sono più articoli (in questo caso commenti).

Quindi una sezione è come un div-container che contiene articoli.

L'articolo e la sezione sono entrambi elementi semantici di HTML5. La sezione è una sezione generica a livello di blocco di una pagina Web, ma rilevante per il contenuto della nostra pagina Web. L'articolo è anche a livello di blocco, ma l'articolo fa riferimento a un singolo post di blog, a un commento, di una pagina Web.

Sia l'articolo che la sezione dovrebbero includere una voce h2-h6.

Per un post sul blog, utilizzare la sintassi seguente per l'articolo e la sezione.

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>