Значения тега раздела HTML5?

Я знаю есть тонны вопросов по этой теме, но я не могу найти авторитетный источник ответа.

Это официальное определение и 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. Я ищу ответы, задокументированные официальными источниками

Ответы

Ответ 1

http://www.w3.org/wiki/HTML/Elements/section не является официальным определением section. section определенный в спецификации HTML5, которая в настоящее время является рекомендацией кандидата (которая представляет собой снимок Редактор проекта).

В CR, section определяется как:

Элемент section представляет общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группировку контента, обычно с заголовком.

section представляет собой элемент sectioning content (вместе с article, aside и nav). Эти секционирующие элементы и заголовки (h1 - h6) создают outline.

Следующие три примера семантически эквивалентны (то же значение, один и тот же план):

<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>

<!-- example 1: using section elements with corresponding heading levels -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h2>Waking up</h2>
    <p>…</p>
  </section>
  <section>
    <h2>The big moment!</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Going to bed</h2>
    <p>…</p>
  </section>
</section>

<!-- example 1: using section elements with h1 everywhere -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h1>Waking up</h1>
    <p>…</p>
  </section>
  <section>
    <h1>The big moment!</h1>
    <p>…</p>
  </section>
  <section>
    <h1>Going to bed</h1>
    <p>…</p>
  </section>
</section>

Таким образом, вы можете использовать section всякий раз, когда (*) используете h1 - h6. И вы используете section, когда вам нужна отдельная запись в контуре, но не можете (или не хотите) использовать заголовок.

Также обратите внимание, что header и footer всегда принадлежат к его ближайшему секвенциальному содержимому предка (или к корню секции, например, body, если нет элемента секционирования). Другими словами: каждый элемент section/article/aside/nav может иметь свой собственный header/footer.

article, aside и nav являются, так сказать, более конкретными вариантами элемента section.

два совершенно разных случая использования

Эти два варианта использования не совсем разные. В случае с "контейнером" вы можете сказать, что section представляет главу документа, а в случае "глава" section представляет собой главу статьи/контента (которая, конечно же, является частью документа).

Таким же образом некоторые заголовки используются для обозначения частей веб-страницы (например, "Навигация", "Пользовательское меню", "Комментарии" и т.д.), а некоторые заголовки используются для заголовка содержимого ( "Мой первый день" ) "Мои любимые книги" и т.д.).

Ответ 2

ОК, вот что я собрал из официальных источников.

MDN:

Элемент HTML Section() представляет собой общий раздел документа, то есть тематическую группировку содержимого, обычно с заголовком.

Примечания по использованию:

Если имеет смысл отдельно разобрать содержимое элемента, используйте вместо него элемент. Не используйте элемент как общий контейнер; для чего это важно, особенно если секционирование предназначено только для стилизации. Эмпирическое правило состоит в том, что раздел должен логически отображаться в контуре документа.

Путеводитель по Shay Howe:

Секция с большей вероятностью путается с div, чем с статьей. В качестве элемента уровня блока раздел определен для представления общего документа или раздела приложения.

Лучший способ определить, когда использовать раздел по сравнению с div, - это посмотреть на фактический контент. Если блок контента может существовать как запись в базе данных и явно не нужен в качестве стилей CSS-стиля, то элемент раздела наиболее применим. Разделы должны использоваться для разбивки страницы вверх, предоставления естественной иерархии и, как правило, будет иметь правильный заголовок.

dev.opera.com

В принципе, элемент статьи предназначен для автономных фрагментов контента, которые имеют смысл вне контекста текущей страницы и могут быть прекрасно объединены. Такие фрагменты контента включают сообщения в блогах, видео и транскрипцию, новость или отдельную часть серийной истории.

Элемент раздела, с другой стороны, предназначен для разбиения содержимого страницы на разные функции или области предметов или разбиения статьи или истории на разные разделы.

Ответ 3

<article> и <section> являются обоими разделами. Вы можете вставить один секционирующий элемент внутри другого, чтобы срезать внешний элемент на секции.

HTML Living Standard, 4.4.11:

... Разделение элементов содержимого всегда считается подразделением их ближайшего корневого корня предка или его ближайшего элемента-предка секционирующего содержимого, в зависимости от того, что ближе всего, независимо от того, какие подразумеваемые разделы могут создавать другие заголовки....

Вы можете рассматривать <section> как общий элемент секционирования. Это как <div>, который определяет раздел в его ближайшем родительском разрезе (или ближайший корень секционирования, который может быть <body>).

An <article> также является разделом, но он имеет некоторую семантику. А именно, он представляет собой контент, который является самодостаточным (то есть, возможно, это может быть его собственная страница, и это все равно имеет смысл).

Ответ 4

Здесь официальный w3c принимает раздел:

http://www.w3.org/wiki/HTML/Elements/section

Цитата: "Элемент [section] представляет собой общий раздел документа или приложения".

Я думаю, теоретически, если у вас есть статья внутри статьи, то ваш пример вложенных выборок может работать. Но почему у вас есть статья в статье? Делает мало смыслового смысла.