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?
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é :-)
Respostas:
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):
Além disso, aqui está uma descrição
article, não encontrada na fonte acima:fonte
<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!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 1 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 :
<section>Seções<article>Seções<nav>Seções<aside>Seções<h*>2 (nem todas fazem isso, veja abaixo)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<h*>são os únicos que não criam seçõesHá 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:
<body><td><blockquote><details>,<dialog>,<fieldset>, E<figure>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 outline1. 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>?<section>s são como capítulos de livros<article>, pelo menos no nível mais baixo<article>e seus comentários<article>também podem ser envolvidos com um<article><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?<header>e<footer><header><footer><header><main><body>)<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)<article>seções 31 a mente vem: esboço, algoritmo, seccionamento implícita
2 eu uso
<h*>como abreviação para<h1>,<h2>,<h3>,<h4>,<h5>e<h6>3 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>fonte
sections in an article are like chapters in a book, articles in a section are like poems in a volume- melhor e mais intuitivaarticlevssectionexplicação que eu já vi!A marcação para esse documento pode ter a seguinte aparência:
Você pode encontrar mais informações neste artigo em A List Apart .
fonte
<header>e deve<footer>ser um elemento do nível do documento, bem como dentro de<section|article|nav|aside>seções?Eu sugiro ler a página wiki do W3 sobre a estruturação do HTML5 :
Eles incluem uma imagem que limpei aqui:
fonte
<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?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 centrosection. 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 ".[ 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.
fonte
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:
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_3modified 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.
fonte
O principal erro: você tem "divite" em todo o documento.
Porque isso?
Ao invés de:
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 ;)
fonte
<hgroup>não faz parte do HTML5 maisPor que não ter os IDs de item_1, item_2 etc. etc. nas próprias tags do artigo? Como isso:
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.
fonte
Não respondi a outras porque é meio difícil adivinhar a que você estava se referindo. Se houver mais perguntas, entre em contato.
fonte
articlenecessariamente seja de uma fonte externa . w3schools.com/html5/tag_article.aspAqui está o meu exemplo em que trabalho
fonte
https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element
fonte
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
fonte
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:
sugere para mim que
sectioné um nível superior aarticle. Conforme mencionado nesta resposta,sectionagrupa 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 ossectiongrupos em um nível superior em comparação comarticle.Eu acho que é para ser usado assim:
ou para um site de notícias:
fonte
„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).http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element
fonte
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.
fonte
De acordo com a resposta de Nathan , isso faz todo o sentido (para partes vermelhas e laranja, talvez você possa usar
div's e / ouheaderefooterrespectivamente):fonte