HTML5 migliori prassi; sezione / intestazione / parte / elementi articolo

https://stackoverflow.com/questions/4781077

23-10-2019
|

Domanda

Ci sono abbastanza informazioni su HTML5 sul web (e anche su StackOverflow), ma ora sono curiosi di conoscere le "buone pratiche". Tag come sezione / intestazioni / articolo sono nuovi, e tutti hanno opinioni diverse su quando / dove si dovrebbe utilizzare questi tag. Allora, cosa ne pensate ragazzi dei seguenti layout e codice?

layout del sito

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

linea 7. section intorno tutto il sito? O solo un div?

linea 8. Ogni inizio section con un header?

la linea 23. E 'questo div giusto? o deve essere questa una section?

Linea 24. Split sinistra / colonna di destra con un div.

Linea posto giusto per il tag 25. article?

linea 26. E 'necessario mettere il vostro h1-tag nel header-tag?

Linea 43. Il contenuto non è legato al l'articolo principale, così ho deciso che questo è un section e non un aside.

Linea 44. H2 senza header

Linea 53. section senza header

Linea 63. Div con tutte le notizie (non correlati)

Linea 64. header con h2

Linea 65. Hmm, div o section? O rimuovere questo div e utilizzare solo il article-tag

Linea 105. Piè di pagina: -)

Soluzione

In realtà, lei ha perfettamente ragione quando si tratta di intestazione / piè di pagina. Ecco alcune informazioni di base su come ciascuna delle principali tag HTML5 può / deve essere usato (vi suggerisco di leggere il sorgente completo collegato alla parte inferiore):

sezione - Usato per raggruppare il contenuto tematico-correlati. Suona come un elemento div, ma non è. Il div non ha alcun significato semantico. Prima di sostituire tutto il tuo div è con elementi a sezione, chiedere sempre te stesso: “E 'tutto il contenuto correlato?”

a parte - Usato per i contenuti tangenzialmente correlato. Solo perché alcuni appare di contenuti a sinistra oa destra del contenuto principale non è una ragione sufficiente per utilizzare l'elemento da parte. Chiedetevi se il contenuto all'interno della parte può essere rimossa senza ridurre il significato del contenuto principale. Pullquotes sono un esempio di contenuti relativi tangenzialmente.

intestazione - C'è una differenza fondamentale tra l'elemento di intestazione e l'utilizzo accettano di intestazione (o testa d'albero). Di solito c'è una sola intestazione o ‘testa d'albero’ in una pagina. In HTML5 si può avere come molti come si desidera. La specifica definisce come “un gruppo di aiuti introduttivi o di navigazione”. È possibile utilizzare un colpo di testa in qualsiasi sezione del tuo sito. In realtà, probabilmente dovrebbe usare un colpo di testa all'interno della maggior parte delle sezioni. La specifica descrive l'elemento sezione come “un raggruppamento tematico dei contenuti, tipicamente con un'intestazione.”

nav - Destinato ad importanti informazioni di navigazione. Un gruppo di link raggruppati insieme non è una ragione sufficiente per utilizzare l'elemento nav. Navigazione a livello di sito, d'altra parte appartiene a un elemento nav.

piè di pagina - Suoni come il suo una descrizione della posizione, ma la sua non. Elementi piè di pagina contengono informazioni sul suo elemento contenente:. chi l'ha scritto, diritti d'autore, link a contenuti correlati, ecc Mentre noi di solito hanno un piè di pagina per un intero documento, HTML5 ci permette di avere anche piè di pagina all'interno di sezioni

Sorgente : http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as- essi-sound /

Inoltre, ecco una descrizione sul article, non si trova nella fonte di cui sopra:

article - Usato per l'elemento che specifica, contenuti indipendenti autosufficiente. Un articolo deve avere un senso per conto suo. Prima di sostituire tutto il tuo div è con elementi articolo, Chiedetevi sempre: “E 'possibile leggere in modo indipendente dal resto del sito web?”

Altri suggerimenti

Purtroppo le risposte date finora (tra cui il più votato) sono o "solo" senso comune, sbagliato tinta unita o confusa al massimo. Nessuno di parole chiave cruciali ¹ pop-up!

ho scritto 3 risposte:

Per capire il ruolo degli elementi HTML discusso qui dovete sapere che alcuni di loro sezione del documento. Ogni documento HTML può essere sezionato secondo il algoritmo di HTML5 contorno con lo scopo di creare un contorno-?or?-tabella dei contenuti (TOC). Il contorno non è generalmente visibile (in questi giorni), ma gli autori dovrebbero usare l'HTML in modo tale che il contorno risultante riflette le loro intenzioni.

È possibile creare sezioni con esattamente di questi elementi e altro :

creazione (esplicite) sottosezioni
- sezioni <section>
- sezioni <article>
- sezioni <nav>
- sezioni <aside>
creazione di sezioni di pari livello o sottosezioni
- sezioni di tipo non specificato con <h*> ^² (non tutti fare questo, vedi sotto)
alla sezione di livello da vicino l'attuale esplicito (sub)

Le sezioni può essere nominato:

<h*> creato sezioni stesse nome
sezioni <section|article|nav|aside> saranno nominati dal primo <h*> se ce n'è uno
- questi <h*> sono gli unici che non creano sezioni stesse

C'è una cosa da sezioni: le seguenti contesti (cioè elementi) creano "confini contorno". Qualunque sia sezioni che contengono è privato a loro:

del documento stesso con <body>
celle della tabella con <td>
<blockquote>
<details>, <dialog>, <fieldset>, e <figure>
non altro

title

example HTML <body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline 1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)

Questo solleva due questioni:

Qual è la differenza tra <article> e <section>?

entrambi possono:
- essere annidati l'uno nell'altro
- prendere una nozione diversa in un contesto diverso o livello di nidificazione
<section>s sono come capitoli di libri
- di solito hanno fratelli (forse in un altro documento?)
- insieme hanno qualcosa in comune, come capitoli di un libro
un autore, un <article>, almeno sul livello più basso
- esempio standard: un singolo blog commento
- un blog stesso è anche un buon esempio
- un <article> blog e le sue commento <article>s potrebbe anche essere avvolto con un <article>
- è qualche cosa "completo", non una parte di una serie di simile
<section>s in un <article> sono come i capitoli in un libro
<article>s in <section> sono come poesie in un volume (entro una serie)

Come fare <header>, <footer> e <main> in forma in?

hanno a zero influenza il sezionamento
<header> e <footer>
- Essi consentono di contrassegnare le zone di ogni sezione
- anche all'interno di una sezione che si possono avere più volte
- per differenziare dalla parte principale in questa sezione
- limitata solo dalla gusto dell'autore
- <header>
  - può segnare il titolo / nome di questa sezione
  - può contenere un logo per questa sezione
  - non ha bisogno di essere in cima o in parte superiore della sezione
- <footer>
  - può segnare i crediti / autore di questa sezione
  - può venire in cima alla sezione
  - può anche essere al di sopra di un <header>
<main>
- consentito solo una volta
- segna la parte principale della sezione di livello superiore (cioè il documento, <body> cioè)
- sottosezioni stessi non hanno alcun margine di profitto per la loro parte principale
- <main> può persino “nascondere” in alcune sottosezioni del documento, mentre <header> e <footer> del documento non può (che avrebbe segnato markup intestazione / piè di pagina del medesimo comma allora)
  - , ma non è consentito nelle sezioni <article> ³
- aiuta a distinguere “la cosa vera” da non-intestazione, non piè di pagina, i contenuti non-principale del documento, se questo ha un senso nel tuo caso ...

^{¹ in mente arriva: contorno, algoritmo, implicita sezionamento} ^{² Io uso <h*> come abbreviazione di <h1>, <h2>, <h3>, <h4>, <h5> e <h6>} ^{³ non è consentito in <main> <aside> o <nav>, ma che è di nessuna sorpresa. - In effetti: <main> può solo nascondere in (nested) descrescente sezioni <section> o apparire a livello alto, cioè <body>}

Gli elementi div possono essere sostituiti con i nuovi elementi: intestazione, nav, sezione, articolo, a parte, e piè di pagina .

Il markup per il documento potrebbe essere simile al seguente:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

E 'possibile trovare maggiori informazioni nel questo articolo su A List Apart .

suggerirei la lettura della pagina wiki href="http://www.w3.org/wiki/HTML_structural_elements#Enter_HTML5_structural_elements"> W3 :

<header> Utilizzato per contenere il contenuto di intestazione di un sito. <footer> Contiene il contenuto piè di pagina di un sito. Contiene il <nav> menu di navigazione, o altre funzionalità di navigazione per la pagina.

<article> Contiene un pezzo autonoma di contenuti che renderebbe
senso se sindacato come un elemento RSS, per esempio una notizia.

<section> Utilizzato per entrambi i gruppi di diversi articoli in diversi
fini o soggetti, o per definire le varie sezioni di un singolo articolo.

<aside> Definisce un blocco di contenuti che è legato alla principale contenuti attorno ad esso, ma non fondamentale per il flusso di esso.

un immagine che ho ripulito qui:

HTML5

Nel codice, questo appare come modo:
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
esploriamo alcuni degli elementi HTML5 in modo più dettagliato.

<section>

L'elemento <section> è per contenente distinte aree differenti di funzionalità o area soggetti, o la rottura di un articolo o un racconto su in diverse sezioni. Quindi in questo caso: "sidebar1" contiene varie link utili che persisterà in ogni pagina del sito, come ad esempio "Iscriversi ai feed" e "acquistare musica da negozio". "Principale" contiene il contenuto principale di questa pagina, che è post del blog. In altre pagine del sito, questo contenuto cambierà. Si tratta di un elemento abbastanza generica, ma ha ancora significato semantico modo più rispetto al vecchio <div> pianura.

<article>

<article> è legato alla <section>, ma è nettamente diverso. Considerando <section> è per raggruppare sezioni distinte di contenuto o funzionalità, <article> è a contenere corrispondenti individuale pezzi autonomi di contenuti, come ad esempio i messaggi individuali di blog, video, immagini o notizie. Pensate in questo modo - se si dispone di un certo numero di elementi di contenuto, ciascuna delle quali sarebbe adatto per la lettura su loro possedere, e avrebbe senso di sindacare come elementi distinti nel RSS feed, quindi <article> è adatto per loro marcatura. Nel nostro esempio, <section id="main"> contiene le voci di blog. Ogni voce del blog sarebbe adatto per la sindacazione di un elemento in un feed RSS, e sarebbe un senso se letto da solo, fuori dal contesto, quindi <article> è perfetto per loro:
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
eh semplice? Attenzione però che si può anche sezioni nido all'interno articoli, in cui ha senso per farlo. Ad esempio, se ciascuno di questi post blog ha una struttura coerente di sezioni distinte, allora si potrebbe mettere le sezioni all'interno dei vostri articoli pure. Si poteva guardare qualcosa di simile a questo:
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> e <footer>

come abbiamo già detto in precedenza, lo scopo della <header> e elementi <footer> è quella di avvolgere intestazione e piè di contenuti, rispettivamente. Nel nostro esempio particolare l'elemento <header> contiene un'immagine del logo, e l'elemento <footer> contiene un diritto d'autore preavviso, ma si potrebbe aggiungere più contenuti elaborati se si voleva. Anche Si noti che è possibile avere più di un'intestazione e piè di ogni pagina - così come l'intestazione di livello superiore e piè di pagina che abbiamo appena discusso, è potrebbe anche avere un elemento <header> e <footer> annidato all'interno di ogni <article>, nel qual caso sarebbe solo applicarsi a quel particolare articolo. Anno Dominiding al nostro esempio precedente:
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<nav>

L'elemento <nav> è per marcare i link di navigazione o altri costrutti (ad esempio un modulo di ricerca), che vi porterà a diverse pagine del il sito corrente, o di diverse aree della pagina corrente. Altri link, come link sponsorizzati, non contano. Ovviamente si può includere rubriche e altri elementi strutturanti all'interno del <nav>, ma è non obbligatoria.

<aside>

avrete notato che abbiamo usato un elemento <aside> per marcare la 2 ° barra laterale: quello contenente concerti e recapiti ultima. Questo è perfettamente appropriato, come <aside> è per marcare pezzi informazioni che sono legati al flusso principale, ma non si adattano ad esso direttamente. E il contenuto principale in questo caso è tutto sulla band! Altre buone scelte per un <aside> sarebbero informazioni sulla autore del post sul blog (s), una biografia di banda, o di una discografia di banda con i link per comprare i loro album.

Da dove viene quel <div> congedo?

Così, con tutti questi grandi nuovi elementi da utilizzare sulle nostre pagine, i giorni di l'umile <div> sono numerati, no? NO. In realtà, il <div> ha ancora un uso perfettamente valido. Si dovrebbe usare quando non v'è altro elemento più adatto disponibile per raggruppare una superficie di contenuti, che sarà spesso quando si utilizza un elemento puramente al gruppo insieme contenuti per lo styling scopi / visivi. Un esempio comune è utilizzando un <div> per avvolgere tutto il contenuto della pagina, e quindi utilizzando CSS per centrare tutto il contenuto nella finestra del browser, o di applicare un immagine di sfondo specifico per l'intero contenuto.

spiegazioni nella mia “risposta principale” ]

Linea 7. sezione in giro tutto il sito? O solo un div

Nessuno dei due. Per lo styling: utilizzare il <body>, è già lì. Per il sezionamento / semantica: come dettagliato nel mio esempio HTML il suo effetto è contrario alla utilità. involucri in più per contenuti già avvolto è alcun miglioramento, ma il rumore.

riga 8. Ogni sezione inizia con un'intestazione?

No, è la scelta dell'autore dove mettere contenuti tipicamente riassunti come “header”. E se questo header-contenuto è chiaramente riconoscibile senza marcatura in più, si può perfettamente soggiorno senza <header>. Questa è anche la scelta dell'autore.

Linea 23. È questo div giusto? o deve essere questa una sezione

Il <div> è probabilmente sbagliato. Essa dipende dalle intenzioni: è per lo styling solo potesse avere ragione. Se è per scopi semantiche è sbagliato: dovrebbe essere un <article> invece come mostrato nella mia altra risposta . <article> è anche giusto se è sia per lo styling e il sezionamento combinato.

<section> sembra sbagliato qui, come non ci sono sezioni simili prima o dopo questa, come capitoli di un libro. (Questo è lo scopo della <section>).

Linea 24. Split sinistra / colonna di destra con un div .

No. Perché?

Linea posto giusto per 25. article tag?

Sì, ha un senso.

Linea 26. E 'necessario per mettere il H1 -tag nel intestazione -tag?

No. Un elemento <h*> solitario probabilmente mai ha bisogno di andare in un <header> (ma può, se si vuole), in quanto è già chiaro che è il titolo di quello che sta per venire. -. Avrebbe senso se questo <header> anche comprendeva una tagline (contrassegnati con <p>), ad esempio

Linea 43. Il contenuto non è correlato al l'articolo principale, così ho deciso che questo è un sezione e non un a parte .

Si tratta di un equivoco che un <aside> deve essere “tangenzialmente Relativo alla ” per il contenuto intorno. Il punto è: utilizzare un <aside> se il contenuto è solo “ tangenzialmente related” o non a tutti

Tuttavia, a parte <aside> essere una buona scelta, <article> potrebbe essere ancora meglio di un <section> come “piatti caldi” e “nuovi elementi” non devono essere letti come due capitoli di un libro. Si può perfettamente andare per uno di loro e non il contrario come un ordinamento alternativo di qualcosa, non come due parti di un tutto.

Linea 44. H2 senza intestazione

è grande.

linea 53. sezione senza intestazione

Bene, non c'è <header>, ma le foglie <h2>-voce abbastanza chiaro quale parte di questa sezione è l'intestazione.

Linea 63. Div con tutte le notizie (non correlati)

<article> o <aside> potrebbe essere migliore.

Linea 64. intestazione con h2

Discusso già.

Linea 65. Hmm, div o sezione ? O rimuovere questo div e utilizzare solo il article -tag

Esattamente! Rimuovere il <div>.

Linea 105. Piè di pagina : -)

Molto ragionevole.

la spiegazione nella mia risposta “principale” il documento in questione deve essere marcato secondo un contorno.

Nelle seguenti due tabelle che spettacolo:

il codice HTML originale e il suo contorno
un possibile schema previsto e il codice HTML facendo che

html originale (accorciato) _{<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>} HTML originale rilevante per contorno _{<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>} < br> con conseguente contorno 1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3) Il profilo della originale è in via definitiva, non ciò che si intendeva. < br>

La tabella seguente mostra la mia proposta di una versione migliorata. Io uso il seguente markup:

~~<removed>~~
<NEW_OR_CHANGED_ELEMENT>
<element MOVED_ATTRIBUTE=1>

possibili contorni destinato 1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3 < br> modifica html _{<body> <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main> <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article> </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer> </section> ``} con conseguente contorno 1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav) Il modificata HTML riflette il destinato modo contorno meglio di l'originale. < br>

L'errore principale:. Hai "divitis" in tutto il documento feed Perché questo

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

Al posto di:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

Per stilizzare questa intestazione, gerarchia usare i CSS: body> sezione> header> h1, body>> header> H2

Più, ... Linea 63: il motivo per cui intestazione avvolge h2 ?? Se non si include alcun elemento più dentro di testa, basta usare un singolo h2.
Tenete a mente, la struttura non è al documento di stilizzazione, ma la costruzione di un documento di auto-ha spiegato.

Applicare questo al resto del documento; Buona fortuna;)

Perché non avere l'item_1, item_2, ecc ID sull'articolo tag stessi? In questo modo:

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

Sembra superfluo aggiungere i div wrapper. valori ID non hanno alcun significato semantico in HTML, quindi penso che sarebbe perfettamente valido per fare questo - che non stai dicendo che il primo articolo è sempre item_1, proprio item_1 nel contesto della pagina corrente . ID non sono tenuti ad avere un significato che è indipendente dal contesto.

Inoltre, per quanto riguarda la tua domanda sulla linea 26, non credo che il

tag è necessario lì, e credo che si potrebbe omettere dal momento che è da solo nel div "main-sinistra". Se fosse nella lista principale di articoli si potrebbe desiderare di includere il tag

solo per il gusto di coerenza.

Sezione deve essere utilizzato solo per avvolgere una sezione all'interno di un documento (come capitoli e simili)
Con intestazione tag: NO. tag di intestazione rappresenta un wrapper per intestazione di pagina e non deve essere confuso con H1, H2, ecc.
Quale div? : D
Si
Da W3C Scuole:

Il tag definisce contenuto esterno. Il contenuto esterno potrebbe essere una notizia-articolo da un provider esterno o un testo da un web log (blog), o un testo da un forum, o di qualsiasi altro contenuto da una fonte esterna.
No, tag di intestazione ha un uso diverso. H1, H2, ecc rappresentare i titoli dei documenti H1 è il più importante

Non risposi altri quelli, perché è un po 'difficile da indovinare che cosa stavate riferendo. Se ci sono altre domande, per favore fatemelo sapere.

Ecco il mio esempio in cui io lavoro

entrare descrizione dell'immagine qui

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https: // www .w3.org / TR / 2014 / REC-html5-20141028 / sections.html # the-nav-elemento

Non credo che si dovrebbe usare il tag sul sommario notizia (linee 67, 80, 93). È possibile utilizzare la sezione o semplicemente avere il div che racchiude.

Un articolo ha bisogno di essere in grado di stare in piedi da solo e ancora un senso o essere completa. Come il suo incomplete o semplicemente un estratto non può essere un articolo, la sua più di una sezione.

Quando si fa clic su 'continua' nella pagina successiva possono

EDIT: Purtroppo devo correggermi.

per un collegamento alle specifiche W3, fare riferimento al di sotto https://stackoverflow.com/a/17935666/2488942 che includere un esempio (a differenza di quelli che ho guardato in precedenza).

Ma poi .... Qui è un bell'articolo su di esso grazie alla @Fez.

La mia risposta originale era:

Il modo in cui le specifiche W3 sono strutturate:

4.3.4 Sezioni

4.3.4.1 L'elemento corporeo

4.3.4.2 L'elemento sezione

4.3.4.3 L'elemento nav

4.3.4.4 L'elemento articolo

....

mi suggerisce che section è di livello superiore rispetto article. Come accennato in questa risposta gruppi section tematicamente collegati contenuti. Contenuto all'interno di un articolo è a mio parere tematicamente legati in ogni caso, quindi questa, almeno per me, poi suggerisce anche che i gruppi section a un livello superiore rispetto a article.

Credo che sia pensato per essere utilizzato in questo modo:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

o per un sito web di notizie:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014

“linea 23. E 'questo div giusto? o deve essere questa una sezione? “

Nessuno dei due -. C'è un tag main a tale scopo, che è consentito solo una volta per pagina e dovrebbe essere usato come un wrapper per il contenuto principale (a differenza di una barra laterale o di un colpo di testa a livello di sito)

<main>
    <!-- The main content -->
</main>

http: // www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

Ci tengo a precisare questa domanda, più precisamente, correggetemi se sbaglio Consente di prendere un esempio di bacheca di Facebook

1.Wall rientra tag "sezione", che denota è separato dalla pagina.

messaggi 2.All sono sotto tag "articolo".

3.Then abbiamo singolo post, che rientra nel tag "sezione".

3.We hanno voce "utente X inviare questo" per questo possiamo usare "voce" tag.

4.Quindi all'interno postare abbiamo tre una sezione è immagini / testo, come-share-commento pulsante e commentare scatola.

casella di commento 5.Per possiamo usare tag articolo.

risposta di Nathan, questo ha perfettamente senso (per le parti rosse e arancione, forse si potrebbe usare di div e / o e header footer rispettivamente):

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow