Boas práticas do HTML5; elementos da secção/cabeçalho/de lado / artigo

Question

Boas práticas do HTML5; elementos da secção/cabeçalho/de lado / artigo

Existem informações suficientes sobre o HTML5 na web (e também no stackoverflow), mas agora estou curioso sobre as "melhores práticas". As marcas como a secção/cabeçalhos/artigo são novas, e todos têm opiniões diferentes sobre quando/onde deverá usar estas marcas. O que acham do seguinte esquema e Código?

Website layout

  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>

linha 7. À volta de todo o site? Ou apenas um div?

linha 8. Cada section começa com header?

linha 23. Isto é verdade? ou isto tem de ser um section?

linha 24. Dividir a coluna esquerda / direita com um div.

linha 25. Lugar certo para a etiqueta?

linha 26. É necessário colocar a sua etiqueta h1 na etiqueta header?

linha 43. O conteúdo não está relacionado com o artigo principal, então eu decidi que este é um section e não um aside.

linha 44. H2 sem header

linha 53. section Sem header

linha 63. Div com todas as notícias (não relacionadas) itens

Linha 64. header com h2

linha 65. Hmm, div ou section? Ou remover este div e usar apenas o article - tag

linha 105. Rodapé: -)

501

html html5 header article

Author: Robert Siemer, 2011-01-24

Source

16 answers

Infelizmente, as respostas dadas até agora (incluindo as mais votadas) ou são "apenas" senso comum, completamente erradas ou confusas, na melhor das hipóteses. nenhuma de palavras-chave cruciais¹ salta!

Escrevi três respostas:

respostas concretas às perguntas do OP.
melhorado HTML detalhado.

Para compreender o papel dos elementos html aqui discutidos, é preciso saiba que alguns deles seção o documento. Cada documento html pode ser seccionado de acordo com o algoritmo de contorno HTML5 com o objetivo de criar um esboço ou índice (cot). O contorno não é geralmente visível (atualmente), mas os autores devem usar html de tal forma que o contorno resultante reflita suas intenções.

Você pode criar seções com exatamente estes elementos e nada else:

<section> secções
<article> secções
<nav> secções
<aside> secções

criar secções ou subsecções aparentadas
- secções de tipo não especificado com <h*>^² (nem todos fazem isso, veja abaixo)
para nivelar de perto a actual secção explícita (sub)

As secções podem ser nomeado:

<h*> as secções criadas nomeiam-se
<section|article|nav|aside> as secções serão nomeadas pela primeira <h*> Se houver uma
- estes <h*> são os únicos que não criam as próprias secções

Há mais uma coisa nas seções: os seguintes contextos (ou seja, elementos) criam "limites delineados". Todas as secções que contêm são privadas para eles.

o próprio documento com <body>
células da tabela com <td>
<blockquote>
<details>, <dialog>, <fieldset>, e <figure>
nada mais

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)

Isto levanta duas questões:

Qual é a diferença entre <article> e <section>?

ambos podem:
- be aninhados um no outro
- tome uma noção diferente num contexto diferente ou nível de nidificação
São como capítulos de livros.

um autor, um <article>, pelo menos no nível mais baixo

Exemplo padrão: um único comentário no blog

Uma entrada no blog também é boa exemplo

um item no blog <article> e o seu comentário <article>s também pode ser embrulhado com um <article>

É uma coisa "completa", Não uma parte de uma série de coisas similares.

{[[0]} s em um <article> são como capítulos em um livro

<article>s em um {[[0]} são como poemas em um volume (dentro de uma série)

Como fazer <header>, <footer> e encaixam-se?

eles têm influência zero na secção
<header> e <footer>
- eles permitem-te marcar zonas de cada secção
- para diferenciar da parte principal nesta secção
- <header>
  - pode marcar o título/nome desta secção
  - pode conter um logótipo para esta secção
  - não tem necessidade de estar na parte superior ou superior da secção
- <footer>
  - pode marcar os créditos / autor desta secção
  - pode vir no topo da secção
  - pode até estar acima de um <header>
<main>
- só é permitido uma vez
- marca a parte principal da secção de nível superior (isto é, o documento, {[9] } ou seja)
- as próprias subsecções não têm marca para a sua parte principal
- Pode até "esconder-se" em algumas subsecções do document, while document'S <header> and <footer> can't (that markup would mark header/footer of that subsection then)
  - mas não é permitido nas secções <article> ³
- ajuda a distinguir "a coisa real" do conteúdo não-cabeçalho, não-rodapé, Não-principal do documento, se isso faz sentido no seu caso...

^{¹ a mente vem: esboço, algoritmo, implícito corte}
^{² eu uso <h*> como um atalho para <h1>, <h2>, <h3>, <h4>, <h5> e <h6>}
^{³ nem é <main> permitido em <aside> ou <nav>, mas que não é surpresa. - Com efeito: <main> só pode esconder-se em (aninhadas) secções descendentes <section> ou aparecer ao nível superior, nomeadamente <body>}

185

Author: Robert Siemer, 2018-01-25 05:11:54

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

A marcação para esse documento pode parecer o seguinte:

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

Pode encontrar mais informações neste artigo numa lista à parte .

113

Author: cilerler, 2014-05-05 08:38:01

Eu sugeria ler a página wiki W3 sobre estruturação do HTML5:

<header> Usado para conter o conteúdo de cabeçalho de um site. <footer> Contém o conteúdo do rodapé de um site. <nav> contém a menu de navegação, ou outra funcionalidade de navegação para a página.

<article> contém uma peça independente de conteúdo que faria
sinta se sindicado como um item RSS, por exemplo um item de notícias.

<section> usado em qualquer grupo diferentes artigos em diferentes
objectivos ou temas, ou definir as diferentes secções de um único artigo.

<aside> Define um bloco de conteúdo que está relacionado com a conteúdo em torno dele, mas não central para o fluxo dele.

Eles incluem uma imagem que eu limpei aqui:

html5

Em código, parece que sim.
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
Vamos explorar alguns dos elementos HTML5 com mais detalhes.
<section>

O elemento <section> é para conter diferentes áreas de funcionalidade ou área de assuntos, ou quebrar um artigo ou história em diferentes secções. Então, neste caso: "barra lateral 1" contém vários links úteis que irão persistir em cada página do site, tais como "subscribe to RSS" and "Buy music from store". "main" contém o conteúdo principal desta página, que são posts do blog. Nas outras páginas da site, este conteúdo alterar. É um elemento bastante genérico, mas ainda tem muito mais significado semântico do que o velho.

<article>

<article> está relacionado com <section>, mas é distintamente diferente. Considerando que {[8] } se destina a agrupar secções distintas de conteúdo ou funcionalidade, <article> destina-se a conter indivíduos relacionados pedaços de conteúdo autônomos, como posts individuais em blogs, vídeos, imagens ou notícias. Pense desta forma-se você tem um número de produtos conteúdo, cada um dos quais seria adequado para leitura própria, e faria sentido para sindicar como itens separados em um RSS alimento, então <article> é adequado para marcá-los. Na nossa exemplo: <section id="main"> contém itens no blog. Cada item do blog seria adequado para sindicalizar como um item em um feed RSS, e seria faça sentido quando lido por conta própria, fora de contexto, portanto <article> é perfeito para eles.
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
Simples, não é? Esteja ciente de que você também pode nidificar seções dentro artigos, onde faz sentido fazê-lo. Por exemplo, se cada um dos estes posts do blog têm uma estrutura consistente de seções distintas, então você poderia colocar seções dentro de seus artigos também. Pode parecer algo do género:
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> e <footer>

Como já mencionamos acima, o propósito do <header> e <footer> os elementos são para embrulhar o conteúdo do cabeçalho e do rodapé, respectivamente. No nosso exemplo particular, o elemento <header> conteudo uma imagem de logótipo e o elemento <footer> contém um copyright repare, mas você poderia adicionar um conteúdo mais elaborado se quisesse. Tambem note que você pode ter mais de um cabeçalho e rodapé em cada página - assim como o cabeçalho de nível superior e rodapé que acabamos de discutir, Você também pode ter um elemento <header> e <footer> aninhado dentro de cada Nesse caso, aplicar-se-iam apenas a esse caso específico. artigo. Adicionando ao nosso exemplo acima:
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<nav>

O elemento <nav> destina-se a marcar as ligações de navegação ou outras constructs (por exemplo, um formulário de pesquisa) que irá levá-lo para diferentes páginas de o site atual, ou diferentes áreas da página atual. Outras ligações, tais como links patrocinados, não contam. Você pode, naturalmente, incluir títulos e outros elementos estruturantes dentro do <nav>, mas é não é obrigatório.

<aside>

Deves ter reparado que usámos um elemento <aside> para marcar o 2 barra lateral: a que contém os últimos gigs e detalhes de contato. Presente é perfeitamente adequado, pois <aside> é para marcar pedaços de informações que estão relacionadas com o fluxo Principal, mas não se encaixam nele directamente. E o conteúdo principal neste caso é tudo sobre a banda! Outras boas escolhas para um <aside> seriam informações sobre o autor do(s) post (s) no blog, biografia de uma banda ou discografia de uma banda com links para comprar seus álbuns.

Onde fica isso? <div>?
Então, com todos estes novos elementos para usar nas nossas páginas, os dias de certamente que os humildes estão contados? Não. Na verdade, o <div> ainda tem um uso perfeitamente válido. Você deve usá-lo quando não há outro elemento mais adequado disponível para agrupar uma área de conteúdo, o que muitas vezes será quando você está usando apenas um elemento para agrupar conteúdo em conjunto para fins de estilo / visual. Um exemplo comum é usando um <div> para embrulhar todo o conteúdo na página, e depois usar CSS para centralizar todo o conteúdo na janela do navegador, ou aplicar um imagem de fundo específica para todo o conteúdo.

59

Author: Justin, 2015-06-29 17:24:44

[explicações na minha "resposta principal""]

Linha 7. secção em torno de todo o site? Ou apenas um div ?

Nenhum dos dois. Para estilo: use o {[[0]}, ele já está lá. Para seccionamento / semântica: como detalhado em meu exemplo HTML seu efeito é contrário à utilidade. Embalagens Extra para conteúdo já embalado não é uma melhoria, mas ruído.

linha 8. Cada secção começa com um cabeçalho?

Não, é a escolha do autor onde colocar o conteúdo tipicamente resumido como "cabeçalho". E se esse conteúdo de cabeçalho for claramente reconhecível sem marcação extra, pode perfeitamente permanecer sem <header>. Esta é também a escolha do autor.

linha 23. Este é o div certo? ou deve ser uma secção ?

O <div> provavelmente está errado. Depende das intenções: é para o estilo só poderia estar certo. Se for para propósitos semânticos é errado: deve ser um <article> em vez de Como mostrado na minha outra resposta . <article> também está certo se for para Estilismo e seccionamento combinados.

<section> parece errado aqui, pois não há seções semelhantes antes ou depois deste, como capítulos em um livro. (Este é o propósito de <section>).

linha 24. Dividir a coluna esquerda / direita com um div .

Não. Por quê?

linha 25. Lugar certo para a artigo etiqueta?

Sim, faz sentido.

linha 26. É necessário colocar a sua marca h1 no cabeçalho - tag?

Não. Um elemento solitário <h*> provavelmente nunca precisa de ir em um {[[1]} (mas pode se você quiser) como já está claro que é o título do que está prestes a vir. – Faria sentido se <header> também incluísse uma linha de tag (marcada com <p>), por exemplo.

linha 43. Conteudo não está relacionado com o artigo principal, por isso decidi que esta é uma secção e não uma secção à parte .

É um mal-entendido que um <aside> tem de ser" tangencialmente relacionado " com o conteúdo em redor. O ponto é: use um <aside> Se o conteúdo for apenas" tangencialmente relacionado " ou não for nada!

No entanto, além de <aside> ser uma escolha decente, <article> ainda pode ser melhor do que um <section> como "itens quentes" e "novos itens" não devem ser lidos como dois capítulos de um livro. Você pode perfeitamente ir para um deles e não o outro como uma escolha alternativa de algo, não como duas partes de um todo.

linha 44. H2 sem cabeçalho

É óptimo.

linha 53. secção sem cabeçalho

Bem, não há <header>, mas o <h2>-cabeçalho deixa bem claro que parte desta secção é a cabecalho.

linha 63. Div Com todas as notícias (não relacionadas)

<article> ou talvez seja melhor.

linha 64. cabeçalho com h2

Já discutimos isso.

linha 65. Hmm, div ou secção? Ou remover este div e utilizar apenas o artigo-etiqueta

Exactamente! Remover o <div>.

linha 105. rodapé :-)

Muito razoável.

20

Author: Robert Siemer, 2017-05-23 12:10:48

De acordo com a explicação na minha resposta "principal" o documento em questão deve ser marcado de acordo com um esboço.

Nos dois quadros que se seguem, eu mostro:

O HTML original e o seu contorno
a possible intended outline and the HTML doing that

html original (abreviado) _{<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 original relevante para 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>} contorno resultante 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) o contorno do original é definitivamente não o que era destinar.

O quadro seguinte apresenta a minha proposta de versão melhorada. Eu uso a seguinte marca:

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

possível intenção contorno 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 modificado 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>`} contorno resultante 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) O HTML modificado reflecte o traçado pretendido muito melhor do que o original.

19

Author: Robert Siemer, 2017-05-23 11:55:00

O principal erro: você tem "divitis" em todo o documento.Porquê isto?

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

Em vez de:

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

Para estilizar este cabeçalho, use a hierarquia CSS: body > section > header > h1, body > section > header > h2

Mais,...linha 63: por que o cabeçalho wraps h2?? Se você não incluir mais nenhum elemento dentro do cabeçalho, basta usar um único h2.
Tenha em mente, a sua estrutura não é estilizar o documento, mas construir um documento auto-explicado.

Aplica isto ao resto do documento; Boa sorte;)

17

Author: Covi, 2012-02-08 23:19:25

Por que não ter o item_1, item_2, etc. Identificações nas etiquetas dos artigos? Assim:

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

Parece desnecessário adicionar os invólucros. Os valores de ID não têm significado semântico em HTML, por isso acho que seria perfeitamente válido fazer isto - não está a dizer que o primeiro artigo é always item_1, apenas item_1 no contexto da página actual. IDs não são obrigados a ter qualquer significado que seja independente do contexto.

Também, quanto à sua pergunta em linha 26, I don't think the tag is required there, and I think you could omit it since it's on its own in the "main-left" div. Se estivesse na lista principal de artigos, você poderia querer incluir a tag

apenas por uma questão de consistência.

10

Author: Matt Browne, 2011-03-20 16:40:31

a secção deve ser usada apenas para embrulhar uma secção dentro de um documento (como capítulos e similares)
comcabeçalho marca: no. A tag Header representa uma embalagem para cabeçalho da página e não deve ser confundida com H1, H2, etc.
Sim

A marca define o conteúdo externo. O conteúdo externo pode ser um artigo de notícias de um provedor externo, ou um texto de um log web (blog), ou um texto de um fórum, ou qualquer outros conteúdos de uma fonte externa.

não, a marca de cabeçalho tem um uso diferente. H1, H2, etc. representar os títulos dos documentos H1 sendo os mais importantes

Não respondi a outras porque é difícil adivinhar a que se referia. Se houver mais perguntas, por favor, avise-me.

5

Author: MeanEYE, 2011-01-24 11:09:45

Eis o meu exemplo em que trabalho.

enter image description here

3

Author: Ivan, 2014-08-24 12:20:53

Não acho que devas usar a etiqueta no resumo das notícias (linhas 67, 80, 93). Você poderia usar a seção ou apenas ter o div envolvente.

Um artigo precisa de ser capaz de estar por conta própria e ainda fazer sentido ou ser completo. Como é incompleto ou apenas um extracto não pode ser um artigo, é mais uma secção.

Quando clicar em 'ler mais', a página seguinte pode

1

Author: conordarcy, 2011-07-19 11:38:23

Editar: infelizmente eu tenho que corrigir-me.

Ver abaixo https://stackoverflow.com/a/17935666/2488942 para um link para as especificações w3 que incluem um exemplo (ao contrário dos que eu olhei anteriormente).

Mas então...... Aqui é um belo artigo sobre isso graças a @Fez. A minha resposta original foi:

A forma como as especificações w3 estão estruturadas:

4. 3. 4 secções

4.3.4.1 o elemento corporal

4.3.4.2 o elemento de Secção

4.3.4.3 o elemento nav

4.3.4.4 o elemento do artigo

....

Sugere-me que section é mais alto do que article. Como mencionado em esta resposta section agrupa conteúdos temáticos relacionados. O conteúdo de um artigo está, na minha opinião, tematicamente relacionado de qualquer maneira, portanto, para mim, pelo menos, então também sugere que section grupos em um nível mais elevado em comparação com article.

Acho que está destinado a ... ser usado assim:

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

Ou para um site de notícias:

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

1

Author: pandita, 2017-05-23 12:10:48

"Linha 23. Este div está certo? ou tem de ser uma secção?"

Nem – não é um main tag para essa finalidade, o que só é permitido uma vez por página, e deve ser usada como um wrapper para o conteúdo principal (em contraste com um lateral ou um site-cabeçalho).

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

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

1

Author: feeela, 2014-08-27 13:08:24

<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

1

Author: Юрий Светлов, 2018-05-28 01:40:35

Quero esclarecer esta questão com mais precisão, corrija-me se estiver errado. Vejamos um exemplo do Facebook Wall

1.Parede vem sob" seção " tag, que denota que é separado da página.

2.Todos os posts vêm sob a etiqueta "artigo".

3.Então temos um post único, que vem sob "seção" tag.

3.Temos o cabeçalho " X user post this "Para isso podemos usar" heading " tag.

4.Então dentro do posto temos três seção Um é Images / text,like-share-comment button and comment box.

5.Para a caixa de comentários, podemos usar a tag do artigo.

0

Author: Flicks Gorger, 2015-08-14 17:32:18

De acordo com a resposta de Nathan , isto faz todo o sentido (para as partes vermelhas e laranjas, talvez você possa usar {[[0]}'s } e / ou header e footer respectivamente):

0

Author: alejnavab, 2017-05-23 12:34:45

score 458 · Accepted Answer

Na verdade, tens toda a razão quando se trata de cabeçalho/rodapé. Aqui está algumas informações básicas sobre como cada uma das principais tags do HTML5 Pode / deve ser usada (sugiro ler a fonte completa ligada no fundo):

secção – utilizado para agrupar conteúdos temáticos. Parece um elemento div, mas não é. O div não tem significado semântico. Antes de substituir todos os seus div por elementos de seção, sempre pergunte a si mesmo: "é todo o conteúdo relacionado?"

de lado. – utilizado para conteúdo tangencialmente relacionado. Só porque algum conteúdo aparece à esquerda ou à direita do conteúdo principal não é razão suficiente para usar o elemento de lado. Pergunte a si mesmo se o conteúdo dentro do aparte pode ser removido sem reduzir o significado do conteúdo principal. Pullquotes são um exemplo de conteúdo tangencialmente relacionado.

cabeçalho – há uma diferença crucial entre o elemento header e o geral utilização aceite do cabeçalho (ou do cabeçalho). Normalmente só há um cabeçalho ou "cabeça de mastro" numa página. Em HTML5 você pode ter quantos você quiser. O spec define - o como "um grupo de ajudas introdutórias ou de navegação". Você pode usar um cabeçalho em qualquer seção em seu site. Na verdade, você provavelmente deve usar um cabeçalho dentro da maioria de suas seções. A spec descreve o elemento de seção como "um agrupamento temático de conteúdo, tipicamente com um título."

nav – destinados a grandes informação de navegação. Um grupo de links agrupados não é razão suficiente para usar o elemento nav. A navegação no local, por outro lado, pertence a um elemento de navegação.

rodapé – parece uma descrição da posição, mas não é. Os elementos do rodapé contêm informações sobre o seu elemento contendo: quem o escreveu, direitos autorais, links para conteúdo relacionado, etc. Enquanto nós normalmente temos um rodapé para um documento inteiro, HTML5 nos permite também ter rodapé dentro partes.

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

Além disso, aqui está uma descrição em article, não encontrada na fonte acima:

artigo – utilizado para elementos que especifiquem conteúdos independentes e autónomos. Um artigo deve fazer sentido por si só. Antes de substituir todos os seus div por elementos de artigo, Pergunte sempre você mesmo: "é possível lê-lo independentemente do resto do site?"