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.
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.
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?
Mi sembra giusto. Gli esempi che ho trovato anche questo. Grazie. – Abizern
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.
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:
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>
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.
Il collegamento al layout tentato non sembra funzionare. – Chris
@Abizern, potresti caricare un'immagine su StackOverflow invece di collegare il sito esterno a uno? L'immagine attuale della tua domanda è rotta. – Justin
All'epoca in cui ho postato la domanda, non c'era l'opzione per farlo. – Abizern