Я знаю есть тонны вопросов по этой теме, но я не могу найти авторитетный источник ответа.
Это официальное определение и wiki page, а там больше документации, но там они не объясняют правильное использование, если не в очень простых примерах или в разных пути.
То, что я "понял" до сих пор:
<section> определяет часть (раздел) страницы, такую как blogrolls, новости заголовков, список записей блога, список комментариев и все, что может быть с общей темой.
<article> определяет контент, который имеет смысл, отчужденный от остальной части страницы (?) и имеющий одну тему (запись в блоге, комментарий, статья и т.д.).
Но, внутри <article>, мы можем разделить его части в разделах с помощью <section>, и в этом случае он имеет функцию контейнера для маркировки глав большего текста.
Уверенность
Если эти предложения правильны (или частично исправлены), это означает, что <section> имеет два совершенно разных случая использования.
У нас может быть страница, написанная таким образом:
<!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 new about fruits?</h1>
<article><h1>Apples are the best</h1>Apples are better than bananas</article>
<article><h1>Apple 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>
И вот как выглядит Outline:
1. Fruits war blog
1. What new about fruits?
1. Apples are the best
2. Apple cakes
2. Articles about fruits
1. Apples vs Bananas
1. Introduction:
2. The question:
Итак, <section> считается с двумя полностью разными и не связанными смысловыми значениями?
Правильное использование:
<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
<article>
<section></section> <!-- USED AS CHAPTER -->
</article>
</section>
в этом напыщенном пути?
Я обнаружил, что можно использовать в обратном порядке:
<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
<section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
<article></article> <!-- COMMENT -->
</section>
</article>
Но я не могу найти ответ на то, как я писал ниже.
Я думаю, прочитал обсуждение, где группа W3C написала основу тега <section>, может быть полезна, но я не могу ее найти.
N.B. Я ищу ответы, задокументированные официальными источниками