Significados da tag da seção HTML5?
eu sei Há toneladas de perguntas sobre esse tópico, mas não consigo encontrar uma fonte autorizada para a resposta.
Isto é odefinição oficial e apágina wikie lá estámais documentação, mas não explicam o uso correto, se não em exemplos muito simples ou de maneiras diferentes.
O que eu "entendi" até agora:
<section>
define uma parte (seção) da página, como blogrolls, manchetes de notícias, lista de entradas de blogs, lista de comentários e tudo o que pode estar relacionado a um tópico comum.
<article>
define um conteúdo que tem um sentido separado do resto da página (?) e que tem um único tópico (entrada de blog, comentário, artigo, etc).
Masdentro de um<article>
, podemos dividir partes dele em seções usando<section>
e, neste caso, tem a função de recipiente para marcar capítulos de um texto maior.
Se estas frases estiverem corretas (ou parcialmente corretas) isso significa que<section>
tem dois casos de uso completamente diferentes.
Poderíamos ter uma página escrita desta maneira:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Fruits</title>
</head>
<body>
<h1>Fruits war blog</h1>
<section id="headlineNews"> <!-- USED AS CONTAINER -->
<h1>What's new about fruits?</h1>
<article><h1>Apples are the best</h1>Apples are better than bananas</article>
<article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>
</section>
<section id="blogEntries"> <!-- USED AS CONTAINER -->
<h1>Articles about fruits</h1>
<article>
<h1>Apples vs Bananas</h1>
<section> <!-- USED AS CHAPTER -->
<h2>Introduction:</h2>
Bananas have always leaded the world but...
</section>
<section> <!-- USED AS CHAPTER -->
<h2>The question:</h2>
Who is the best? We don't know so much about apples...
</section>
</article>
</section>
</body>
</html>
E é assim que parece o esboço:
1. Fruits war blog
1. What's new about fruits?
1. Apples are the best
2. Apple's cakes
2. Articles about fruits
1. Apples vs Bananas
1. Introduction:
2. The question:
Então o<section>
é pensado com doiscompletamente significados semânticos diferentes e não relacionados?
É correto usar:
<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
<article>
<section></section> <!-- USED AS CHAPTER -->
</article>
</section>
dessa maneira nostada?
Eu descobri queé possível usar do modo inverso:
<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
<section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
<article></article> <!-- COMMENT -->
</section>
</article>
Mas não consigo encontrar uma resposta para a maneira que escrevi abaixo.
Eu adivinho leia a discussão onde o grupo de W3C escreveu a base do<section>
tag pode ser útil, mas não consigo encontrá-lo.
N.B. Estou à procura de respostas documentadas com fontes autorizadas