Migliori pratiche HTML5; elementi sezione / intestazione / parte / articolo

546

Ci sono abbastanza informazioni su HTML5 sul web (e anche su StackOverflow), ma ora sono curioso delle "migliori pratiche". I tag come sezione / intestazioni / articolo sono nuovi e ognuno ha opinioni diverse su quando / dove si dovrebbero usare questi tag. Quindi cosa ne pensate del seguente layout e codice?

Layout del sito Web

  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. in sectiontutto il sito? O solo un div?

riga 8. Ciascuno sectioninizia con un header?

linea 23. È divgiusto? o deve essere questo section?

riga 24. Dividi colonna sinistra / destra con a div.

linea 25. Posto giusto per il articletag?

riga 26. È necessario inserire il tuo h1-tag nel header-tag?

riga 43. Il contenuto non è correlato all'articolo principale, quindi ho deciso che questo è un sectione non un aside.

linea 44. H2 senza header

linea 53. sectionsenzaheader

linea 63. Div con tutte le notizie (non correlate)

linea 64. headercon h2

linea 65. Hmm, divo section? Oppure rimuovilo dive usa solo il articletag

linea 105. Piè di pagina :-)

html  header  article 
— Bas van Dorst
fonte
— Christophe Roussy,

Risposte:

486

In realtà, hai ragione quando si tratta di header / footer. Ecco alcune informazioni di base su come utilizzare / utilizzare ciascuno dei principali tag HTML5 (suggerisco di leggere l'intera fonte collegata in basso):

sezione : utilizzata per raggruppare contenuti correlati a tematiche. Sembra un elemento div, ma non lo è. Il div non ha significato semantico. Prima di sostituire tutti i tuoi div con elementi di sezione, chiediti sempre: "Tutto il contenuto è correlato?"

a parte : utilizzato per contenuti tangenzialmente correlati. Solo perché parte del contenuto appare a sinistra o a destra del contenuto principale non è una ragione sufficiente per usare l'elemento da parte. Chiediti se il contenuto all'interno del lato può essere rimosso senza ridurre il significato del contenuto principale. I pullquotes sono un esempio di contenuto tangenzialmente correlato.

header - Esiste una differenza cruciale tra l'elemento header e l'uso generale accettato dell'intestazione (o masthead). Di solito c'è solo un'intestazione o 'masthead' in una pagina. In HTML5 puoi averne quanti ne vuoi. La specifica lo definisce come "un gruppo di aiuti introduttivi o di navigazione". Puoi usare un'intestazione in qualsiasi sezione del tuo sito. In effetti, probabilmente dovresti usare un'intestazione nella maggior parte delle sezioni. Le specifiche descrivono l'elemento della sezione come "un raggruppamento tematico di contenuti, in genere con un'intestazione".

nav - Destinato alle principali informazioni di navigazione. Un gruppo di collegamenti raggruppati non è un motivo sufficiente per utilizzare l'elemento nav. La navigazione a livello di sito, d'altra parte, appartiene a un elemento nav.

piè di pagina - Sembra una descrizione della posizione, ma non lo è. Gli elementi a piè di pagina contengono informazioni sul suo elemento di contenimento: chi l'ha scritto, copyright, collegamenti a contenuti correlati, ecc. Mentre di solito abbiamo un piè di pagina per un intero documento, HTML5 ci consente di avere anche un piè di pagina all'interno delle sezioni.

Fonte : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Inoltre, ecco una descrizione su article, non trovata nella fonte sopra:

articolo - Utilizzato per l'elemento che specifica il contenuto indipendente e autonomo. Un articolo dovrebbe avere senso da solo. Prima di sostituire tutti i tuoi div con elementi dell'articolo, chiediti sempre: "È possibile leggerlo indipendentemente dal resto del sito web?"

— Nathan JB
fonte
68
È un indovinello per me come questa risposta abbia ottenuto così tanti voti: non parla di <article>elementi, non contrappone gli elementi citati, né li raggruppa. La risposta non fornisce "buone pratiche", né risponde a nessuna delle domande esplicite dell'OP!
— Robert Siemer,
2
@RobertSiemer Per me è anche un indovinello il modo in cui il tuo commento ha ricevuto 24 voti positivi e la domanda solo 6 voti negativi ...
— Veger,
@RobertSiemer perché sembra fantastico, cosa ne pensi? Non avevo idea che fosse male fino a quando non hai controllato il tuo commento e lo hai confermato con la risposta successiva.
— Det
238

Sfortunatamente le risposte fornite finora (comprese quelle più votate) sono "solo" buon senso, chiaramente sbagliate o nella migliore delle ipotesi confuse. Nessuna delle parole chiave cruciali 1 pop-up!

Ho scritto 3 risposte:

  1. Questa spiegazione (inizia qui).
  2. Risposte concrete alle domande dell'OP.
  3. HTML dettagliato migliorato.

Per capire il ruolo degli elementi html discussi qui devi sapere che alcuni di essi sezionano il documento. Ogni documento html può essere sezionato secondo l' algoritmo di struttura HTML5 allo scopo di creare un sommario —o⁠⁠ sommario (TOC). Lo schema non è generalmente visibile (oggigiorno), ma gli autori dovrebbero usare l'html in modo tale che lo schema risultante rifletta le loro intenzioni.

Puoi creare sezioni con esattamente questi elementi e nient'altro :

  • creazione di sottosezioni (esplicite)
    • <section> sezioni
    • <article> sezioni
    • <nav> sezioni
    • <aside> sezioni
  • creazione di sezioni o sottosezioni di pari livello
    • sezioni di tipo non specificato con <h*>2 (non tutte, vedi sotto)
  • per salire di livello, chiudere l'attuale sezione (secondaria) esplicita

Le sezioni possono essere nominate:

  • <h*> le sezioni create si nominano
  • <section|article|nav|aside>le sezioni saranno nominate dal primo <h*>se ce n'è una
    • questi <h*>sono gli unici che non creano sezioni da soli

C'è ancora una cosa nelle sezioni: i seguenti contesti (ovvero gli elementi) creano "contorni del contorno". Qualsiasi sezione in essi contenuta è privata per loro:

  • il documento stesso con <body>
  • celle di tabella con <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset>, E<figure>
  • niente altro

titolo

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)









Ciò solleva due domande:

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

  • entrambi possono:
    • essere annidati l'uno nell'altro
    • prendere una nozione diversa in un contesto o livello di nidificazione diverso
  • <section>sono come capitoli di libri
    • di solito hanno fratelli (forse in un documento diverso?)
    • insieme hanno qualcosa in comune, come i capitoli di un libro
  • un autore, uno <article>, almeno al livello più basso
    • esempio standard: un singolo commento sul blog
    • anche un post sul blog è un buon esempio
    • un post di blog <article>e i suoi commenti <article>potrebbero anche essere racchiusi in un<article>
    • è qualcosa di "completo", non parte di una serie di simili
  • <section>s in an <article>sono come i capitoli di un libro
  • <article>s in a <section>sono come poesie in un volume (all'interno di una serie)

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

  • non hanno influenza sul sezionamento
  • <header> e <footer>
    • ti permettono di contrassegnare le zone di ogni sezione
    • anche all'interno di una sezione puoi averli più volte
    • differenziarsi dalla parte principale di questa sezione
    • limitato solo dal gusto dell'autore
    • <header>
      • può contrassegnare il titolo / nome di questa sezione
      • può contenere un logo per questa sezione
      • non è necessario trovarsi nella parte superiore o superiore della sezione
    • <footer>
      • può contrassegnare i crediti / autore di questa sezione
      • può venire in cima alla sezione
      • può anche essere sopra a <header>
  • <main>
    • consentito solo una volta
    • segna la parte principale della sezione di livello superiore (ovvero il documento, <body>ovvero)
    • le sottosezioni stesse non hanno markup per la loro parte principale
    • <main>può persino "nascondersi" in alcune sottosezioni del documento, mentre il documento è <header>e <footer>non può (quel markup contrassegnerebbe l'intestazione / piè di pagina di quella sottosezione)
      • ma non è consentito nelle <article>sezioni 3
    • aiuta a distinguere "la cosa reale" dal contenuto non header, non footer, non principale del documento, se questo ha senso nel tuo caso ...

1 a mente viene: contorno, algoritmo, il sezionamento implicita
2 Io uso <h*>come abbreviazione di <h1>, <h2>, <h3>, <h4>, <h5>e <h6>
3 non è <main>consentito in <aside>o <nav>, ma che è di nessuna sorpresa. - In effetti: <main>può nascondersi solo in <section>sezioni discendenti (nidificate) o apparire al livello più alto, vale a dire<body>

— Robert Siemer
fonte
33
La risposta è come una stessa poesia. La mia parte preferita è: sections in an article are like chapters in a book, articles in a section are like poems in a volume- la migliore e più intuitiva spiegazione articlevs sectionche abbia mai visto!
— Sergey Lukin,
1
Questa è una vasta conoscenza senza boilerplate riassunta in alcuni punti elenco. Grazie per aver condiviso! A volte su SO la risposta migliore non è né quella accettata né quella più votata.
3
So che è un cliché, ma "Questa dovrebbe essere la risposta accettata!". Note a piè di pagina e tutto! Grazie!
— Eugene,
Eugene e ft o hanno ragione. Ricorda che puoi votare le risposte incomplete e errate mentre voti su questa. Non è un'offesa per i loro autori, è il costo per garantire che vengano visualizzate per prime le risposte migliori. Oltre al commento di Robert sulla risposta scelta, non mi piace nemmeno perché ha plagiato (incompleto) i contenuti di altre parti del web.
— IAmNaN,
Questa risposta molto dettagliata e ha chiarito molte cose, grazie!
— Alaeddine,
112

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

Il markup per quel documento potrebbe essere simile al seguente:

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

Puoi trovare maggiori informazioni in questo articolo su A List Apart .

— cilerler
fonte
25
Questa struttura del boilerplate non vale lo spazio in questa pagina. 1) Nessuno degli elementi HTML menzionati è legato a nessuna posizione in un documento. 2) Implica erroneamente che <header> e <footer> sono elementi a livello di documento. 3) Implica erroneamente che <section> sia inteso come <article> -child. @DanDascalescu
— Robert Siemer
2
Non potrei essere più d'accordo su @RobertSiemer. Questo è ancora uno dei malintesi più comuni sugli elementi HTML5 e sta diventando un handicap semantico per il nostro amato linguaggio di markup.
— kano,
@RobertSiemer Re: 2), Impossibile <header>ed <footer>essere elementi a livello di documento, nonché all'interno delle <section|article|nav|aside>sezioni?
— Flimm,
1
@Flimm, sì, possono. Il mio punto era: la risposta non è sbagliata, semplicemente non risponde molto.
— Robert Siemer,
63

Suggerirei di leggere la pagina wiki W3 sulla strutturazione di HTML5 :

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

<article>Contiene un contenuto autonomo che avrebbe
senso se sindacato come elemento RSS, ad esempio un elemento di notizie.

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

<aside> Definisce un blocco di contenuto correlato al contenuto principale che lo circonda, ma non centrale al suo flusso.

Includono un'immagine che ho ripulito qui:

HTML5

Nel codice, sembra così:

<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' <section>elemento serve a contenere distinte aree diverse di funzionalità o area tematica, oppure a suddividere un articolo o una storia in diverse sezioni. Quindi in questo caso: "sidebar1" contiene vari link utili che permarranno su ogni pagina del sito, come "iscriviti a RSS" e "Acquista musica dal negozio". "main" contiene il contenuto principale di questa pagina, ovvero post di blog. Su altre pagine del sito, questo contenuto cambierà. È un elemento abbastanza generico, ma ha ancora un significato molto più semantico del semplice vecchio <div>.

<article>

<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>

<header> e <footer>

come già accennato in precedenza, lo scopo degli elementi <header>e <footer>è di avvolgere rispettivamente il contenuto di intestazione e piè di pagina. Nel nostro esempio particolare l' <header>elemento contiene un'immagine del logo e l' <footer>elemento contiene un avviso sul copyright, ma se lo desideri puoi aggiungere contenuti più elaborati. Nota anche che puoi avere più di un'intestazione e piè di pagina su ogni pagina - così come l'intestazione e il piè di pagina di livello superiore che abbiamo appena discusso, potresti anche avere un <header>e un <footer>elemento nidificati all'interno di ciascuno <article>, nel qual caso si applicherebbero solo a quello articolo particolare. Aggiungendo al nostro esempio sopra:

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

L' <nav>elemento serve per contrassegnare i collegamenti di navigazione o altri costrutti (ad es. Un modulo di ricerca) che ti porteranno a pagine diverse del sito corrente o aree diverse della pagina corrente. Altri collegamenti, come i collegamenti sponsorizzati, non contano. Ovviamente puoi includere titoli e altri elementi strutturanti all'interno di <nav>, ma non è obbligatorio.

<aside>

potresti aver notato che abbiamo usato un <aside>elemento per contrassegnare la seconda barra laterale: quella che contiene i concerti più recenti e i dettagli di contatto. Ciò è perfettamente appropriato, così come <aside>per la marcatura di informazioni correlate al flusso principale, ma che non si adattano direttamente ad esso. E il contenuto principale in questo caso riguarda la band! Altre buone scelte per un <aside>sarebbero informazioni sull'autore dei post del blog, una biografia della band o una discografia della band con collegamenti per acquistare i loro album.

Dove va via <div>?

Quindi, con tutti questi nuovi fantastici elementi da usare sulle nostre pagine, i giorni degli umili <div>sono contati, sicuramente? NO. In effetti, l'utilizzatore <div> ha ancora un uso perfettamente valido. Dovresti usarlo quando non ci sono altri elementi più adatti disponibili per raggruppare un'area di contenuto, come spesso accade quando stai puramente usando un elemento per raggruppare il contenuto insieme per scopi visivi / di stile. Un esempio comune è l'uso di a <div>per avvolgere tutto il contenuto della pagina e quindi l'uso di CSS per centrare tutto il contenuto nella finestra del browser o applicare un'immagine di sfondo specifica a tutto il contenuto.

— Justin
fonte
1
Per le sezioni nidificate, tuttavia, non avrebbe più senso usare <section class="summary">piuttosto che <section id="summary">? Se avessi più articoli su una pagina, quest'ultimo metodo si tradurrebbe in duplicati ID nella stessa pagina, un falso passo HTML. Giusto?
— JP Lew
Sì, probabilmente userei le classi invece in quell'istanza.
— Justin,
1
Tutti i tag che hai citato non dovrebbero essere racchiusi in un "main" che viene poi racchiuso nel "body"?
— Francisco Aguilera,
1
Il maintag sarebbe buono da aggiungere. Dove metterlo sarebbe deciso in base a ciò che è contenuto unico nella pagina. In questo esempio, penso che lo metterei semplicemente al centro section. Per saperne di più: w3.org/TR/2012/WD-html-main-element-20121217 "La sezione principale del contenuto di un documento include contenuti univoci per quel documento ed esclude il contenuto che viene ripetuto su una serie di documenti come il sito collegamenti di navigazione, informazioni sul copyright, loghi e banner del sito e moduli di ricerca ".
— Giustino,
è ancora così ambiguo come la documentazione MDN
— oldboy
23

[ spiegazioni nella mia "risposta principale" ]

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

Nessuno dei due. Per lo styling: usa il <body>, è già lì. Per il sezionamento / semantica: come dettagliato nel mio esempio HTML, il suo effetto è contrario all'utilità. I wrapper extra per i contenuti già acquisiti non sono miglioramenti, ma rumore.


riga 8. Ogni sezione inizia con un'intestazione?

No, è la scelta dell'autore dove inserire i contenuti in genere riassunti come "header". E se quel contenuto di intestazione è chiaramente riconoscibile senza marcatura extra, può rimanere perfettamente senza <header>. Questa è anche la scelta dell'autore.


linea 23. Questo div è giusto? o deve essere una sezione ?

Il <div>è probabilmente sbagliato. Dipende dalle intenzioni: è solo per lo styling che potrebbe essere giusto. Se è per scopi semantici è sbagliato: dovrebbe essere un <article>invece come mostrato nella mia altra risposta . <article>è giusto anche se è per lo stile e il sezionamento combinati.

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


linea 24. Dividi la colonna sinistra / destra con un div .

No perchè?


riga 25. Posto giusto per il tag articolo ?

Sì, ha senso.


riga 26. È necessario inserire il tag h1 nell'intestazione -tag?

No. Un <h*>elemento solitario probabilmente non ha mai bisogno di entrare in un <header>(ma può farlo se vuoi) in quanto è già chiaro che è l'intestazione di ciò che sta per arrivare. - Avrebbe senso se ciò <header>comprendesse anche una tagline (contrassegnata con <p>), ad esempio.


riga 43. Il contenuto non è correlato all'articolo principale, quindi ho deciso che si tratta di una sezione e non di un lato .

È un fraintendimento che <aside>si debba " correlare tangenzialmente " al contenuto in circolazione. Il punto è: usa un <aside>se il contenuto è solo " tangenzialmente correlato" o per niente!

Tuttavia, oltre ad <aside>essere una scelta decente, <article>potrebbe comunque essere meglio di <section>come "articoli caldi" e "nuovi elementi" non devono essere letti come due capitoli di un libro. Puoi sceglierne uno e non l'altro come uno smistamento alternativo di qualcosa, non come due parti di un tutto.


linea 44. H2 senza intestazione

È grande.


riga 53. sezione senza intestazione

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


linea 63. Div con tutte le notizie (non correlate)

<article>o <aside>potrebbe essere migliore.


riga 64. intestazione con h2

Già discusso.


linea 65. Hmm, div o sezione ? Oppure rimuovi questo div e usa solo l' articolo -tag

Esattamente! Rimuovi il <div>.


linea 105. Piè di pagina :-)

Molto ragionevole.

— Robert Siemer
fonte
Dividere una risposta in 3 incompleti non è utile.
— Christian Strempfer,
6
@ChristianStrempfer In realtà è utile, poiché molte persone non vengono qui per leggere le risposte specifiche a domande specifiche dell'OP (questa risposta), ma per leggere di più sull'argomento in questione (la mia risposta principale). - Credo che con un'enorme risposta tldr non otterrei nemmeno i voti che ho solo sulla mia risposta principale. - Che cosa suggerisci?
— Robert Siemer,
Suggerisco di unirli in un'unica risposta. I voti delle raccolte non sono un buon argomento per dividerli. Soprattutto la terza risposta non può essere isolata, in quanto stai riferendo la tua risposta principale.
— Christian Strempfer,
@ChristianStrempfer Sarebbe troppo lungo per i miei gusti. - Sto lavorando per migliorare i tavoli, però ...
— Robert Siemer,
20

Secondo la spiegazione nella mia risposta "principale", il documento in questione dovrebbe essere contrassegnato secondo uno schema.

Nelle seguenti due tabelle mostro:

  • l'HTML originale e il suo contorno
  • una possibile struttura prevista e il codice HTML che lo fa

original html (shortened)
<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>

original html relevant for outline
<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>












































resulting outline
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)


The outline of the original is
definitively not what was intended.

































































La tabella seguente mostra la mia proposta per una versione migliorata. Uso il seguente markup:

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

possible intended outline
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










































































modified 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>``

resulting outline
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)


The modified HTML reflects the
intended outline way better than
the original.
































































— Robert Siemer
fonte
Grazie per l'eccellente risposta dettagliata, è molto illuminante. Voglio saperne di più sull'argomento, quindi spero che tu possa spiegare alcune delle scelte, che mi sembrano strane. Li posterò come singoli commenti.
— Il
1. intestazione a parte> div [id = logo] mi sembra irrilevante. Attualmente è un'intestazione, ma semanticamente no. Il div della lingua è forse una sorta di navigazione e il logo è forse una sorta di intestazione per l'intero sito, ma sicuramente non per la pagina.
— Il
2. <ARTICLE id = main> sembra davvero solo di presentazione. Non contiene nulla di correlato all'interno. (Lo stesso vale per <ARTICLE id = main-right> ma è molto più difendibile lì (come "news e hot").) Suggerisco di usare div o main nel peggiore dei casi.
— Il
3. <ARTICLE id = news-items> mi sembra il tipico caso in cui userei da parte. Non ha nulla a che fare con l'articolo principale, è solo un po 'di newsfeed. E sono d'accordo che contiene notizie come singoli "piccoli" articoli.
— Il
1
Considera di modificare la tua proposta, la tua risposta "teorica" ​​è scritta molto bene, ma penso che la maggior parte dei principianti guarderà semplicemente l'esempio di codice e potrebbero essere davvero confusi, perché non è in linea con la parte teorica.
— Il
17

L'errore principale: hai "divite" in tutto il documento.
Perchè questo?

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

Invece 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, utilizzare la gerarchia CSS: body> section> header> h1, body> section> header> h2

Altro, ... linea 63: perché l'intestazione avvolge h2 ?? Se non includi più elementi nell'intestazione, usa solo un singolo h2.
Tieni presente che la tua struttura non è di stilizzare il documento, ma di costruire un documento autoesplicato.

Applicalo al resto del documento; In bocca al lupo ;)

— Covi
fonte
4
@superUntitled <hgroup> non fa piú parte di HTML5
— bradley.ayers
Role = "banner" dovrebbe essere sullo stesso h1, non sull'intera intestazione? In questo modo indica un singolo pezzo di testo che un lettore di schermo avrebbe annunciato, non un glob di HTML.
— enigment
11
L'uso di h1 e h2 per logo e linguaggio non ha senso per me. Il piccolo pulsante della lingua a destra dovrebbe essere il secondo contenuto / informazione più importante in questa pagina? E se inserisci il tuo logo in un h1 rispetto a un bot di ricerca, scoprirai che il contenuto principale di ogni pagina è lo stesso (piuttosto noioso nella mia mente). Vedi anche la risposta di @MeanEYE per l'uso di h1 e h2. A parte ciò, gli ID non-semantici usano RDFa se hai bisogno di semantica. La tua strada rende i selettori CSS solo lenti: developers.google.com/speed/docs/best-practices/…
— F Lekschas
10

Perché non avere gli ID item_1, item_2, ecc. Sui tag stessi dell'articolo? Come questo:

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

Non è necessario aggiungere i div wrapper. I valori ID non hanno significato semantico in HTML, quindi penso che sarebbe perfettamente valido farlo - non stai dicendo che il primo articolo è sempre item_1, solo item_1 nel contesto della pagina corrente. Gli ID non devono avere alcun significato indipendente dal contesto.

Inoltre, per quanto riguarda la tua domanda sulla riga 26, non penso che il tag <header> sia richiesto lì, e penso che potresti ometterlo poiché è da solo nel div "main-left". Se fosse nell'elenco principale degli articoli, potresti voler includere il tag <header> solo per motivi di coerenza.

— Matt Browne
fonte
2
Stavo solo seguendo l'esempio originale e stavo mostrando come realizzare la stessa cosa senza inutili div wrapper. Gli ID potrebbero essere lì per qualsiasi numero di motivi ... per una cosa, potrebbero esserci collegamenti di ancoraggio che li puntano.
— Matt Browne,
5
  1. La sezione deve essere utilizzata solo per avvolgere una sezione all'interno di un documento (come capitoli e simili)
  2. Con tag di intestazione : NO. Il tag di intestazione rappresenta un wrapper per l'intestazione di pagina e non deve essere confuso con H1, H2, ecc.
  3. Quale div? : D
  4. sì
  5. Dalle scuole del W3C:

    Il tag definisce il contenuto esterno. Il contenuto esterno potrebbe essere un articolo di notizie da un fornitore esterno, o un testo da un registro web (blog), o un testo da un forum o qualsiasi altro contenuto da una fonte esterna.

  6. No, il tag header ha un uso diverso. H1, H2, ecc. Rappresentano i titoli dei documenti H1 come i più importanti

Non ho risposto ad altri perché è difficile indovinare a cosa ti riferivi. Se ci sono altre domande, per favore fatemi sapere.

— MeanEYE
fonte
1
Grazie per le tue risposte! Al punto 3; Mi dispiace, i numeri di riga non erano giusti. Deve essere line_23 anziché il punto 3; vedi anche le modifiche di riga nel mio post.
— Bas van Dorst,
Sì, faccio la stessa cosa sui miei siti. Generalmente i DIV devono essere utilizzati per creare la struttura del sito. L'introduzione di intestazione, piè di pagina e tag simili in HTML5 è solo per rendere le cose un po 'più facili da leggere. Si comportano allo stesso modo di DIV.
— MeanEYE,
3
Controlla le tue fonti. Il sito delle scuole w3c non specifica che provenga articlenecessariamente da una fonte esterna . w3schools.com/html5/tag_article.asp
— chharvey il
Hm, non pensavo nemmeno che l'articolo dovesse essere usato da una fonte esterna. Questa è una vecchia risposta, non ricordo quasi di cosa si trattasse. :)
— MeanEYE,
Sono d'accordo con il n. 1. Penso che quegli elementi della SEZIONE abbiano più senso come ASIDE.
— Andy,
2 
<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-element

— Юрий Светлов
fonte
1

Non credo che dovresti usare il tag nel riepilogo delle notizie (righe 67, 80, 93). Puoi usare la sezione o semplicemente avere il div allegato.

Un articolo deve essere in grado di resistere da solo e comunque avere un senso o essere completo. Essendo incompleto o solo un estratto, non può essere un articolo, è più una sezione.

Quando fai clic su "leggi di più" la pagina successiva può

— conordarcy
fonte
1

EDIT: Purtroppo devo correggermi.

Fare riferimento di seguito https://stackoverflow.com/a/17935666/2488942 per un collegamento alle specifiche del w3 che includono un esempio (a differenza di quelli che ho visto prima).

Ma poi .... Ecco un bell'articolo a riguardo grazie a @Fez.

La mia risposta originale è stata:

Il modo in cui sono strutturate le specifiche di w3:

4.3.4 Sezioni

4.3.4.1 L'elemento body

4.3.4.2 L'elemento di sezione

4.3.4.3 L'elemento nav

4.3.4.4 L'elemento articolo

....

mi suggerisce che sectionè di livello superiore a article. Come menzionato in questa risposta section raggruppa i contenuti tematicamente correlati. Il contenuto all'interno di un articolo è comunque tematicamente correlato, quindi questo, almeno per me, suggerisce anche che i sectiongruppi ad un livello superiore rispetto a article.

Penso che debba essere usato 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
— pandita
fonte
0

Voglio chiarire questa domanda più precisamente, correggimi se sbaglio Facciamo un esempio della bacheca di Facebook

1.La parete si trova sotto il tag "sezione", che indica che è separato dalla pagina.

2. Tutti i post rientrano nel tag "articolo".

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

3. Abbiamo intestazione "X user post this" per questo possiamo usare il tag "header".

4.Quindi all'interno del post abbiamo tre sezioni una è Immagini / testo, pulsante Mi piace-condividi-commento e casella di commento.

5.Per la casella dei commenti possiamo usare il tag articolo.

— Flicks Gorger
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.