2009-11-24 8 views
12

Cercando di capire quali sono i nuovi elementi semantici in HTML5.<section> o <article>, che è contenuto in cui

Un <section> appartiene a un <article> o è il contrario? Ha importanza?

Sto cercando di ristrutturare un blog wordpress.

+0

Il collegamento al layout tentato non sembra funzionare. – Chris

+0

@Abizern, potresti caricare un'immagine su StackOverflow invece di collegare il sito esterno a uno? L'immagine attuale della tua domanda è rotta. – Justin

+0

All'epoca in cui ho postato la domanda, non c'era l'opzione per farlo. – Abizern

risposta

13

Dal HTML5 spec:

L'elemento section rappresenta una sezione del documento o applicazione generica. Una sezione, in questo contesto, è un raggruppamento tematico di contenuti, in genere con un'intestazione e probabilmente un piè di pagina.

e

L'elemento article rappresenta una sezione indipendente di un documento, pagina o sito. Questo potrebbe essere un post sul forum, un articolo di una rivista o di un giornale, un post di blog, un commento inviato dall'utente o qualsiasi altro elemento indipendente di contenuto.

Quindi direi che entrambi gli elementi section e article possono contenere l'altro elemento, se appropriato. Penso che il diagramma abbia un senso, a parte gli elementi di sezione nidificati:

L'elemento di 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. Una regola generale è che l'elemento della sezione è appropriato solo se i contenuti dell'elemento vengono elencati esplicitamente nella struttura del documento.

Forse usare uno <div> per quello esterno?

+0

Mi sembra giusto. Gli esempi che ho trovato anche questo. Grazie. – Abizern

3

Vorrei usare div per quello esterno e div per quello interno, a meno che non si abbia un titolo direttamente all'interno della sezione interna.

Ta

Rich

Vedere http://html5doctor.com/the-section-element/ per maggiori informazioni.

4

Nel W3 wiki page about structuring HTML5, si dice:

<section>: Usato per entrambi i gruppi diversi articoli in diversi scopi o soggetti, o di definire le diverse sezioni di un unico articolo.

e quindi visualizza an image che ho ripulito:

enter image description here

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

<article> è correlato a <section>, ma è nettamente diverso. Mentre <section> è per il raggruppamento di sezioni distinte di contenuti o funzionalità, <article> è per il contenimento relativi singoli pezzi autonomi di contenuti, come ad esempio i messaggi individuali di blog, video, immagini o notizie. Pensaci in questo modo: se hai un numero di elementi di contenuto , ognuno dei quali sarebbe adatto per la lettura sul proprio , e avrebbe senso per sindacare come elementi separati in un feed RSS , quindi <article> è adatto per marcandoli.

Nel nostro esempio, <section id="main"> contiene post di blog. Ogni blog ingresso sarebbe adatto per la sindacazione di un 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? Ricorda però che puoi anche nidificare le sezioni all'interno degli articoli , dove ha senso farlo. Ad esempio, se ognuno di questi post del blog è caratterizzato da una struttura coerente di sezioni distinte, ad esempio è possibile inserire sezioni all'interno dei propri articoli. Si poteva guardare qualcosa di simile:

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

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

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

IMOO, dovrebbe essere semplice, semplice come quello che la gente normale dare per scontato. Se un nome di tag semplice confonde le persone, è un errore. Per me:

  • Un <article>è un articolo. Le persone condividono articoli. Quando dici che qualcosa è un articolo, prevedo che dovrebbe avere un titolo , e forse anche un piccolo riassunto, così posso decidere di leggerlo o meno. Se è interessante, lo condividerò con i miei amici. È autonomo.

  • Un <section>è una sezione. È una parte di cose correlate. Fondamentalmente, avrai bisogno di altre sezioni per ottenere l'intera immagine.

Perché mettere un <section> all'interno del <body>? Oh perché fa parte del corpo; parte del mio sito web. Inserirò i miei articoli in questa parte.

Perché si inserisce uno <section> all'interno di un <section>? Perché è parte di quella sezione.