Вложенность в HTML5

Question

Насколько я понимаю (поправьте меня, если я ошибаюсь), тег "section" в html5 используется как обёртка div.Если это правильно, хорошо, нет проблем.Но как насчет вложения?Как мы все знаем, довольно часто вкладывать div внутри друг друга.Значит ли это, что в html5 мы будем использовать следующий «раздел»?

Answer 1

Разделы могут быть и должны быть вложенными, если содержание указывает на это.См., Например, http://www.mattryall.net/blog/2008/10/html-5-headings-and-sections и http://blog.whatwg.org/is-not-just-a-semantic

С W3C (выделено мое):

Элементы DIV и SPAN в сочетании сатрибуты id и class предлагают общий механизм для добавления структуры в документы.Эти элементы определяют контент как встроенный (SPAN) или блочный (DIV) , но не накладывают никаких других презентационных идиом на контент

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

Answer 2

Вы не должны вкладывать html5-элементы так, как вы описываете ... вот так:

  <section>
    <section>
      <section>
        <h1>...</h1>
        <p>...</p>
      </section>
    </section>
  </section>

Одна из наиболее распространенных ошибок - вложение или обертывание элементов статьи с элементом section, например так:1004 *

<section>
  <article>
    ...
  </article>
</section>
<section>
  <article>
    ...
  </article>
</section>

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

Правильный способ вложения элементов в html5 - это почти то же, что вы, возможно, уже знаете ... один пример:

<main>
  <div>
    <div>
      <section>
        <header>
          <h1></h1>
          <time datetime=""></time>
        </header>
        <img src="" alt="">
        <p></p>
        <p></p>
        <p></p>
      </section>
    </div>
  </div>
</main>