Práticas recomendadas para HTML5; elementos de seção / cabeçalho / aparte / artigo

546

Há informações suficientes sobre HTML5 na Web (e também no stackoverflow), mas agora estou curioso sobre as "melhores práticas". Tags como seção / cabeçalhos / artigo são novas e todos têm opiniões diferentes sobre quando / onde você deve usar essas tags. Então, o que vocês acham do seguinte layout e código?

Layout do site

  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. sectionem todo o site? Ou apenas um div?

linha 8. Cada sectioncomeço com um header?

linha 23. Isso está divcerto? ou isso deve ser um section?

linha 24. Divida a coluna esquerda / direita com a div.

linha 25. Lugar certo para a articleetiqueta?

linha 26. É necessário colocar sua h1tag header-tag?

linha 43. O conteúdo não está relacionado ao artigo principal, então decidi que este é um sectione não um aside.

linha 44. H2 sem header

linha 53. sectionsemheader

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

linha 64. headercom h2

linha 65. Hmm, divou section? Ou remova isso dive use apenas a articletag

linha 105. Rodapé :-)

html header article

— Bas van Dorst
fonte

456bereastreet.com/archive/201103/...

— Christophe Roussy

486

Na verdade, você está certo quando se trata de cabeçalho / rodapé. Aqui estão algumas informações básicas sobre como cada uma das principais tags HTML5 pode / deve ser usada (sugiro ler a fonte completa vinculada no final):

seção - Usado para agrupar conteúdo relacionado a temas. Soa como um elemento div, mas não é. A div não tem significado semântico. Antes de substituir todos os seus div por elementos de seção, sempre se pergunte: "Todo o conteúdo está relacionado?"

aparte - Usado para conteúdo tangencialmente relacionado. Só porque algum conteúdo aparece à esquerda ou à direita do conteúdo principal não é motivo suficiente para usar o elemento de lado. Pergunte a si mesmo se o conteúdo disponível 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 do cabeçalho e o uso geral aceito do cabeçalho (ou cabeçalho). Geralmente, há apenas um cabeçalho ou 'cabeçalho' em uma página. No HTML5, você pode ter quantas quiser. As especificações o definem como "um grupo de auxílios introdutórios ou de navegação". Você pode usar um cabeçalho em qualquer seção do seu site. De fato, você provavelmente deve usar um cabeçalho na maioria das suas seções. A especificação descreve o elemento de seção como "um agrupamento temático de conteúdo, geralmente com um cabeçalho".

nav - Destinado às principais informações de navegação. Um grupo de links agrupados não é motivo suficiente para usar o elemento nav. A navegação em todo o site, por outro lado, pertence a um elemento nav.

rodapé - Parece uma descrição da posição, mas não é. Os elementos do rodapé contêm informações sobre o elemento que o contém: quem o escreveu, os direitos autorais, os links para o conteúdo relacionado, etc. Embora normalmente tenhamos um rodapé para um documento inteiro, o HTML5 nos permite ter rodapé nas seções.

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

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

article - Usado para o elemento que especifica conteúdo independente e independente. Um artigo deve fazer sentido por si próprio. Antes de substituir todos os seus divs por elementos de artigo, sempre se pergunte: "É possível lê-lo independentemente do restante do site?"

— Nathan JB
fonte

68

É um enigma para mim como essa resposta obteve tantos votos: não fala sobre <article>elementos, não contrasta com os elementos mencionados, nem os agrupa. A resposta não fornece as "melhores práticas", nem responde a nenhuma das perguntas explícitas do OP!

— Robert Siemer 25/10

2

@RobertSiemer Para mim também é um enigma como o seu comentário tem 24 upvotes ea questão apenas 6 downvotes ...

— Veger

@RobertSiemer porque parece ótimo, o que você acha? Eu não fazia ideia de que era ruim até verificar seu comentário e afirmar com a próxima resposta.

— Det

238

Infelizmente, as respostas dadas até agora (incluindo as mais votadas) são "apenas" bom senso, claramente erradas ou, na melhor das hipóteses, confusas. Nenhuma das palavras-chave cruciais ¹ aparece!

Eu escrevi 3 respostas:

Para entender o papel dos elementos html discutidos aqui, você deve saber que alguns deles fazem seção do documento. Todo e qualquer documento html pode ser seccionado de acordo com o algoritmo de estrutura de tópicos HTML5 com o objetivo de criar uma tabela de conteúdo (TOC). O esboço geralmente não é visível (atualmente), mas os autores devem usar o html de forma que o esboço resultante reflita suas intenções.

Você pode criar seções com exatamente esses elementos e nada mais :

criando subseções (explícitas)
- <section> Seções
- <article> Seções
- <nav> Seções
- <aside> Seções
criando seções ou subseções irmãos
- seções do tipo não especificado com <h*>^² (nem todas fazem isso, veja abaixo)
para subir de nível feche a seção (sub) explícita atual

As seções podem ser nomeadas:

<h*> seções criadas se autodenominam
<section|article|nav|aside>As seções serão nomeadas pela primeira <h*>se houver uma
- estes <h*>são os únicos que não criam seções

Há mais uma coisa nas seções: os seguintes contextos (ou seja, elementos) criam "limites de estrutura de tópicos". Quaisquer seções que eles contenham são particulares para eles:

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

título

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)

Isso levanta duas questões:

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

ambos podem:
- ser aninhados um no outro
- adote uma noção diferente em um contexto ou nível de aninhamento diferente
<section>s são como capítulos de livros
- eles geralmente têm irmãos (talvez em um documento diferente?)
- juntos eles têm algo em comum, como capítulos em um livro
um autor, um <article>, pelo menos no nível mais baixo
- exemplo padrão: um único comentário no blog
- uma entrada de blog em si também é um bom exemplo
- uma entrada de blog <article>e seus comentários <article>também podem ser envolvidos com um<article>
- é uma coisa "completa", não faz parte de uma série de
<section>s em um <article>são como capítulos em um livro
<article>s em a <section>são como poemas em um volume (dentro de uma série)

Como <header>, <footer>e <main>encaixar?

eles têm zero influência no corte
<header> e <footer>
- eles permitem que você marque zonas de cada seção
- mesmo dentro de uma seção, você pode tê-los várias vezes
- diferenciar da parte principal desta seção
- limitado apenas pelo gosto do autor
- <header>
  - pode marcar o título / nome desta seção
  - pode conter um logotipo para esta seção
  - não precisa estar na parte superior ou superior da seção
- <footer>
  - pode marcar os créditos / autor desta seção
  - pode vir no topo da seção
  - pode até estar acima de um <header>
<main>
- permitido apenas uma vez
- marca a parte principal da seção de nível superior (isto é, o documento <body>)
- as próprias subseções não têm marcação para sua parte principal
- <main>pode até "ocultar" em algumas subseções do documento, enquanto o documento é <header>e <footer>não pode (essa marcação marcaria o cabeçalho / rodapé dessa subseção)
  - mas não é permitido nas <article>seções ³
- ajuda a distinguir “a coisa real” do conteúdo sem cabeçalho, rodapé e não principal do documento, se isso faz sentido no seu caso ...

^{¹ a mente vem: esboço, algoritmo, seccionamento implícita}
^{² eu uso <h*>como abreviação para <h1>, <h2>, <h3>, <h4>, <h5>e <h6>}
^{³ não é <main>permitido em <aside>ou <nav>, mas que é de nenhuma surpresa. - De fato: <main>só pode ocultar em <section>seções descendentes (aninhadas) ou aparecer no nível superior, a saber<body>}

— Robert Siemer
fonte

33

A resposta é como um poema em si. Minha parte favorita é: sections in an article are like chapters in a book, articles in a section are like poems in a volume- melhor e mais intuitiva articlevs sectionexplicação que eu já vi!

— precisa

1

Esse é um amplo conhecimento sem clichês, resumidos em alguns tópicos. Obrigado por compartilhar! Às vezes, no SO, a melhor resposta não é a aceita nem a mais bem classificada.

3

Eu sei que é clichê, mas, "Esta deve ser a resposta aceita!". Notas de rodapé e tudo! Obrigado!

— Eugene

Eugene e ft ou estão certos. Lembre-se de que você pode votar nas respostas incompletas e incorretas enquanto estiver votando nesta. Não é uma ofensa para seus autores, é o custo de garantir que as melhores respostas sejam vistas primeiro. Além do comentário de Robert sobre a resposta escolhida, também não gosto, porque plagiou conteúdo (incompleto) de outras partes da web.

— IAmNaN

Esta resposta muito detalhada e esclareceu muitas coisas, obrigado!

— Alaeddine

112

Os elementos div podem ser substituídos pelos novos elementos: cabeçalho, navegação, seção, artigo, aparte e rodapé.

A marcação para esse documento pode ter a seguinte aparência:

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

Você pode encontrar mais informações neste artigo em A List Apart .

— cilerler
fonte

25

Essa estrutura padrão não vale o espaço nesta página. 1) Nenhum dos elementos HTML mencionados está vinculado a qualquer posição em um documento. 2) Implica falsamente que <header> e <footer> são elementos no nível do documento. 3) Implica falsamente que <seção> se destina apenas a <artigo> - criança. @DanDascalescu

— Robert Siemer

2

Não foi possível concordar mais @RobertSiemer. Esse ainda é um dos equívocos mais comuns sobre os elementos HTML5 e está se tornando uma desvantagem semântica para nossa amada linguagem de marcação.

— Kano

@RobertSiemer Re: (Pontuação: 2), não pode <header>e deve <footer>ser um elemento do nível do documento, bem como dentro de <section|article|nav|aside>seções?

— Flimm

1

@Limlim, sim eles podem. Meu argumento era: a resposta não está errada - simplesmente não responde muito.

— Robert Siemer

63

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

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

<article>Contém um conteúdo autônomo que faria
sentido se distribuído como um item de RSS, por exemplo, um item de notícias.

<section>Utilizado para agrupar artigos diferentes em diferentes
propósitos ou assuntos, ou para definir as diferentes seções de um único artigo.

<aside> Define um bloco de conteúdo relacionado ao conteúdo principal, mas não central para o fluxo dele.

Eles incluem uma imagem que limpei aqui:

html5

No código, é assim:
<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 <section>elemento é para conter áreas distintas de funcionalidade ou assuntos, ou dividir um artigo ou matéria em seções diferentes. Portanto, neste caso: "sidebar1" contém vários links úteis que persistirão em todas as páginas do site, como "assine o RSS" e "Compre músicas da loja". "main" contém o conteúdo principal desta página, que é postagens de blog. Em outras páginas do site, esse conteúdo será alterado. É um elemento bastante genérico, mas ainda tem muito mais significado semântico do que o velho comum <div>.

<article>

<article>está relacionado <section>, mas é distintamente diferente. Considerando que <section>é para agrupar seções distintas de conteúdo ou funcionalidade, <article>é para conter partes individuais de conteúdo independentes relacionadas, como postagens de blog individuais, vídeos, imagens ou itens de notícias. Pense dessa maneira - se você tiver vários itens de conteúdo, cada um deles adequado para leitura por conta própria, e faria sentido distribuir como itens separados em um feed RSS, <article>será adequado para marcá-los. No nosso exemplo, <section id="main">contém entradas de blog. Cada entrada de blog seria adequada para organizar como um item em um feed RSS e faria sentido quando lida por si só, fora do contexto, portanto, <article> é perfeita para eles:
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
Simples né? Esteja ciente de que você também pode aninhar seções dentro de artigos, onde faz sentido fazê-lo. Por exemplo, se cada uma dessas postagens no blog tiver uma estrutura consistente de seções distintas, você também poderá incluir seções nos seus artigos. Pode ser algo como isto:
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> e <footer>

como já mencionamos acima, o objetivo dos elementos <header>e <footer>é agrupar o conteúdo do cabeçalho e rodapé, respectivamente. Em nosso exemplo específico, o <header>elemento contém uma imagem de logotipo e o <footer>elemento contém um aviso de direitos autorais, mas você pode adicionar conteúdo mais elaborado, se desejar. Observe também que você pode ter mais de um cabeçalho e rodapé em cada página - assim como o cabeçalho e o rodapé de nível superior que acabamos de discutir, você também pode ter um elemento <header>e <footer>aninhado dentro de cada página <article>, caso em que apenas se aplicariam a isso artigo em particular. 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 <nav>elemento é para marcar os links de navegação ou outras construções (por exemplo, um formulário de pesquisa) que o levará a diferentes páginas do site atual ou áreas diferentes da página atual. Outros links, como links patrocinados, não contam. Obviamente, você pode incluir títulos e outros elementos estruturantes dentro do <nav>, mas não é obrigatório.

<aside>

você deve ter notado que usamos um <aside>elemento para marcar a segunda barra lateral: a que contém os shows mais recentes e os detalhes de contato. Isso é perfeitamente apropriado, como <aside>é para marcar informações relacionadas ao fluxo principal, mas que não se encaixam diretamente nele. E o conteúdo principal nesse caso é sobre a banda! Outras boas opções para um <aside>seriam informações sobre o autor da postagem do blog, uma biografia da banda ou uma discografia da banda com links para comprar seus álbuns.

De onde isso sai <div>?

Então, com todos esses ótimos elementos novos para usar em nossas páginas, os dias dos humildes <div>estão contados, com certeza? NÃO. De fato, o <div> ainda tem um uso perfeitamente válido. Você deve usá-lo quando não houver outro elemento mais adequado disponível para agrupar uma área de conteúdo, o que geralmente ocorrerá quando você estiver usando puramente um elemento para agrupar o conteúdo para fins de estilo / visual. Um exemplo comum é usar a <div>para agrupar todo o conteúdo da página e, em seguida, usar CSS para centralizar todo o conteúdo na janela do navegador ou aplicar uma imagem de plano de fundo específica a todo o conteúdo.

— Justin
fonte

1

Para as seções aninhadas, no entanto, não faria mais sentido usar <section class="summary">do que <section id="summary">? Se você tivesse vários artigos em uma página, o último método resultaria em IDs duplicados na mesma página - um passo em falso em HTML. Direita?

— JP Lew

Sim, eu provavelmente usaria classes nesse caso.

— Justin

1

Todas as tags que você mencionou não devem ser agrupadas em um "principal", que é agrupado no "corpo"?

— Francisco Aguilera

1

É mainbom adicionar a tag. Onde colocá-lo seria decidido com base no conteúdo exclusivo da página. Neste exemplo, acho que eu colocaria no centro section. Leia mais: w3.org/TR/2012/WD-html-main-element-20121217 "A seção principal de conteúdo de um documento inclui conteúdo exclusivo desse documento e exclui conteúdo repetido em um conjunto de documentos, como site links de navegação, informações sobre direitos autorais, logotipos e banners do site e formulários de pesquisa ".

— Justin

sua ainda tão ambígua como é a documentação MDN

— Oldboy

23

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

linha 7. seção em todo o site? Ou apenas uma div ?

Nem. Para estilizar: use o <body>, ele já está lá. Para seção / semântica: conforme detalhado no meu exemplo de HTML, seu efeito é contrário à utilidade. Invólucros extras para conteúdo já embrulhado não são melhorias, mas barulho.

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

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

linha 23. Esta div está certa? ou isso deve ser uma seção ?

O <div>provavelmente está errado. Depende das intenções: é apenas para estilizar que pode estar certo. Se é para fins semânticas é errado: deve ser uma <article>vez mostrado na minha outra resposta como . <article>também está certo se for para o estilo e o corte combinados.

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

linha 24. Divida a coluna esquerda / direita com uma div .

Não por que?

linha 25. Lugar certo para a tag do artigo ?

Sim, faz sentido.

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

Não. Um <h*>elemento solitário provavelmente nunca precisa entrar em um <header>(mas pode, se você quiser), pois já está claro que é o cabeçalho do que está por vir. - Faria sentido se isso <header>também incluísse um slogan (marcado com <p>), por exemplo.

linha 43. O conteúdo não está relacionado ao artigo principal, por isso decidi que é uma seção e não um aparte .

É um mal-entendido que um <aside>deve estar "tangencialmente relacionado " ao conteúdo ao redor. O ponto é: use um <aside>se o conteúdo for apenas " tangencialmente relacionado" ou não existir !

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

linha 44. H2 sem cabeçalho

É ótimo.

linha 53. seção sem cabeçalho

Bem, não existe <header>, mas o <h2>cabeçalho deixa bem claro qual parte desta seção é o cabeçalho.

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

<article>ou <aside>pode ser melhor.

linha 64. cabeçalho com h2

Já discutido.

linha 65. Hmm, div ou seção ? Ou remova esta div e use apenas o artigo -tag

Exatamente! Retire o <div>.

linha 105. Rodapé :-)

Muito razoável.

— Robert Siemer
fonte

Dividir uma resposta em três incompletas não é útil.

— Christian Strempfer

6

@ChristianStrempfer Na verdade, é útil, pois muitas pessoas não vêm aqui para ler as respostas específicas para perguntas específicas do OP (esta resposta), mas para ler mais sobre o tópico em questão (minha resposta principal). - Creio que, com uma resposta enorme, nem sequer receberia os votos que tenho na minha resposta principal. - O que você sugere?

— Robert Siemer

Sugiro fundi-los em uma resposta. Votos de coleção não são um bom argumento para dividi-los. Especialmente a terceira resposta não pode ficar sozinha, pois você está se referindo à sua resposta principal.

— Christian Strempfer

@ChristianStrempfer Isso seria muito longo para o meu gosto. - Estou trabalhando para melhorar as tabelas ...

— Robert Siemer

20

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

Nas duas tabelas a seguir, mostro:

o HTML original e seu esboço
um possível esboço pretendido e o HTML fazendo isso

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.

A tabela a seguir mostra minha proposta para uma versão aprimorada. Eu uso a seguinte marcação:

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

Obrigado pela excelente resposta detalhada, é muito esclarecedor. Quero aprender mais sobre o assunto, então espero que você possa explicar algumas das opções que me parecem estranhas. Vou publicá-los como comentários individuais.

— Gorn

1. cabeçalho ao redor de lado> div [id = logo] parece ser irrelevante para mim. Atualmente, é um cabeçalho, mas semanticamente não. A div de idioma é talvez algum tipo de navegação e o logotipo talvez seja o cabeçalho de todo o site, mas certamente não da página.

— Gorn

2. <ARTIGO id = main> parece realmente apenas uma apresentação. Não contém nada relacionado dentro. (O mesmo se aplica a <ARTIGO id = main-right>, mas é muito mais defensável por lá (como "news and hot").) Sugiro usar div ou main na pior das hipóteses.

— Gorn 29/03/16

3. <ARTIGO id = news-items> me parece um caso típico em que eu usaria de lado. Não tem nada a ver com o artigo principal, é apenas um feed de notícias. E eu concordo que ele contém notícias como artigos "pequenos" individuais.

— gorn 29/03

1

Considere editar sua proposta, sua resposta "teórica" está muito bem escrita, mas acho que a maioria dos iniciantes apenas olha o exemplo de código e eles podem estar realmente confusos, porque não está alinhado com a parte teórica.

— Gorn

17

O principal erro: você tem "divite" em todo o documento.
Porque isso?

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

Ao invés 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 esse cabeçalho, use a hierarquia CSS: corpo> seção> cabeçalho> h1, corpo> seção> cabeçalho> h2

Mais, ... linha 63: por que o cabeçalho envolve h2 ?? Se você não incluir mais nenhum elemento no cabeçalho, use apenas um h2.
Lembre-se de que sua estrutura não é para estilizar documentos, mas construir um documento auto-explicado.

Aplique isso ao restante do documento; Boa sorte ;)

— Covi
fonte

4

@superUntitled <hgroup> não faz parte do HTML5 mais

— bradley.ayers

Role = "banner" deve estar no próprio h1, não no cabeçalho inteiro? Dessa forma, ele aponta para um único pedaço de texto que um leitor de tela anunciaria, não para um globo de HTML.

— enigment

11

Usar h1 e h2 para logotipo e idioma não faz sentido para mim. O pequeno botão de idioma à direita deve ser o segundo conteúdo / informações mais importantes nesta página? E se você colocar seu logotipo dentro de um h1, um bot de pesquisa descobrirá que o conteúdo principal de cada página é o mesmo (muito chato na minha mente). Consulte também a resposta @MeanEYE para o uso de h1 e h2. Além disso, os IDs são não-semânticos, use RDFa se você precisar de semântica. Seu caminho torna os seletores de CSS apenas lentos: developers.google.com/speed/docs/best-practices/…

— F Lekschas

10

Por que não ter os IDs de item_1, item_2 etc. etc. nas próprias tags do artigo? Como isso:

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

Parece desnecessário adicionar as divs do wrapper. Os valores de ID não têm significado semântico em HTML, então acho que seria perfeitamente válido fazer isso - você não está dizendo que o primeiro artigo é sempre item_1, apenas o item_1 dentro do contexto da página atual. Os IDs não precisam ter nenhum significado independente do contexto.

Além disso, quanto à sua pergunta na linha 26, não acho que a tag <header> seja necessária lá, e acho que você poderia omiti-la, pois ela é por si só na div "main-left". Se estivesse na lista principal de artigos, convém incluir a tag <header> apenas por uma questão de consistência.

— Matt Browne
fonte

2

Eu estava apenas seguindo o exemplo original e mostrando como realizar a mesma coisa sem divs desnecessários de wrapper. Os IDs podem estar lá por várias razões ... por um lado, pode haver links de ancoragem apontando para eles.

— Matt Browne

5

A seção deve ser usada apenas para quebrar uma seção dentro de um documento (como capítulos e similares)
Com cabeçalho etiqueta de : NÃO. A tag do cabeçalho representa um invólucro para o cabeçalho da página e não deve ser confundida com H1, H2 etc.
Qual div? : D
sim
Das escolas W3C:

A tag 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 da web (blog), ou um texto de um fórum, ou qualquer outro conteúdo de uma fonte externa.
Não, a tag do cabeçalho tem um uso diferente. H1, H2, etc. representam os títulos dos documentos H1, sendo os mais importantes

Não respondi a outras porque é meio difícil adivinhar a que você estava se referindo. Se houver mais perguntas, entre em contato.

— MeanEYE
fonte

1

Obrigado por suas respostas! No ponto 3; Sinto muito, os números de linha não estavam corretos. Deve ser line_23 em vez do ponto 3; veja também a linha muda na minha postagem.

— Bas van Dorst

Sim, faço a mesma coisa nos meus sites. Geralmente, os DIVs devem ser usados para criar a estrutura do site. A introdução de tags de cabeçalho, rodapé e similares no HTML5 é apenas para facilitar a leitura das coisas. Eles se comportam da mesma maneira que o DIV.

— MeanEYE

3

Verifique suas fontes. O site das escolas do w3c não especifica que articlenecessariamente seja de uma fonte externa . w3schools.com/html5/tag_article.asp

— chharvey

Hum, eu nem pensei que esse artigo fosse para ser usado de fonte externa. Esta é uma resposta antiga, mal consigo me lembrar do que se tratava. :)

— MeanEYE

Eu concordo com o # 1. Eu acho que esses elementos da SEÇÃO fazem mais sentido como ASIDEs.

— Andy

3

Aqui está o meu exemplo em que trabalho

insira a descrição da imagem aqui

— Ivan
fonte

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

Não acho que você deva usar a tag no resumo das notícias (linhas 67, 80, 93). Você pode usar a seção ou apenas ter a div anexa.

Um artigo precisa ser independente e ainda fazer sentido ou estar completo. Como incompleto ou apenas um extrato, não pode ser um artigo, é mais uma seção.

Quando você clica em 'leia mais', a página subsequente pode

— conordarcy
fonte

1

Edição: Infelizmente eu tenho que me corrigir.

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

Mas então .... Aqui está um bom artigo sobre isso, graças ao @Fez.

Minha resposta original foi:

A maneira como as especificações do w3 são estruturadas:

4.3.4 Seções

4.3.4.1 O elemento do corpo

4.3.4.2 O elemento de seção

4.3.4.3 O elemento nav

4.3.4.4 O elemento do artigo

....

sugere para mim que sectioné um nível superior a article. Conforme mencionado nesta resposta, section agrupa conteúdo relacionado tematicamente. O conteúdo de um artigo é, na minha opinião, tematicamente relacionado de qualquer maneira, portanto, pelo menos para mim, isso também sugere que os sectiongrupos em um nível superior em comparação com article.

Eu acho que é para 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

— pandita
fonte

1

„Linha 23. Esta div está certa? ou deve ser uma seção? "

Nenhuma - existe uma maintag para esse fim, que é permitida apenas uma vez por página e deve ser usada como wrapper para o conteúdo principal (em contraste com uma barra lateral ou um cabeçalho no site).

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

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

— feeela
fonte

0

Quero esclarecer esta questão com mais precisão, me corrija se estiver errado Vamos dar um exemplo do mural do Facebook

1.Wall vem sob a tag "section", que indica que é separada da página.

2.Todas as postagens vêm sob a tag "article".

3.Em seguida, temos uma única postagem, que vem na tag "seção".

3. Temos o cabeçalho "X user post this" para isso, podemos usar a tag "header".

4.Então, dentro do post, temos três seções, uma é Imagens / texto, botão de compartilhamento de comentários e caixa de comentários.

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

— Flicks Gorger
fonte

0

De acordo com a resposta de Nathan , isso faz todo o sentido (para partes vermelhas e laranja, talvez você possa usar div's e / ou header e footerrespectivamente):

— Alejandro Nava
fonte