Вложенные теги раздела HTML5

Question

Это правильный способ использования тега <section>?

<section id="container">
   <section id="outer">
      <section id="inner">
      </section>
   </section>
</section>

Я пытаюсь понять, должен ли я использовать только один идентификатор раздела, а остальные два раздела оставить просто как div?

Answer 1

Если вы просто используете эти элементы для размещения вещей в некоторых позициях / стилях, то вам, вероятно, следует использовать div.

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

http://html5doctor.com/the-section-element/

Из спецификации:

ПРИМЕЧАНИЕ: Элемент section не является общим элементом контейнера. Когда элемент нужен для стилизации или для удобства сценариям, авторам рекомендуется вместо этого использовать элемент div. Общее правило состоит в том, что элемент section уместен, только если содержимое элемента будет явно указано в документе очертить.

Сказав это, вполне приемлемо вкладывать элементы секций. Может быть что-то вроде:

<section>
    <h1>Portishead</h1>
    <p>Portishead are a cool band from Bristol</p>
    <section>
        <h1>Dummy (album)</h1>
        <p>some info....</p>
        <img src="..." />
    </section>
    <section>
        <h1>Portishead (album)</h1>
        <p>some other info info....</p>
        <img src="..." />
    </section>
</section>

Answer 2

Краткий ответ: Код, который вы указали, не является семантически действительным.

Длинный ответ:

section элементы предназначены для разметки разделов содержимого. Каждый раздел контента (т. Е. Введение, аннотация, содержание, заключение) может иметь подразделы.

Если вы используете эти элементы для структурных целей, вам следует использовать вместо них div элементы. Они семантически бессмысленны.

Это было бы более семантическим:

<section id="introduction">
  <div id="outer">
    <div id="inner">
      Some content
    </div>
  </div>
</section>

Это будет семантический способ разметки вложенных разделов:

<section id="content">
  <h1>Fizz Buzz</h1>
  <section id="chapter-1">
    <h1>Foo bar baz</h1>
    ...
  </section>
  <section id="chapter-2">
    <h1>Lorem ipsum dolor</h1>
    ...
  </section>
  ....
</section>

Answer 3

HTML5 также допускает такие настройки, как:

<section>

<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>

</section>

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

Проверьте http://gsnedders.html5.org/outliner/

Answer 4

Моя личная рекомендация - максимально использовать семантическую структуру при создании макетов HTML5. Как указывалось другими авторами, элементы вложенности раздела вполне приемлемы , однако вам просто нужно убедиться, что это имеет смысл.

Я лично использую несколько шаблонов, которые я поместилвместе на основе некоторых исследований, которые я сделал в течение прошлого года или около того.Наиболее распространенная ситуация для использования вложенных элементов раздела - предоставление ролей ARIA для основного содержимого документа (см. Пример «макета сайта» ниже)

Примечание: предполагается, что присутствуют элементы body / html и т. Д.

Макет сайта

<header class="header" role="banner">
  ....
</header>

<!-- used once per page, implies role="main" -->   
<main> 
  <!-- declares page content to be a document and not a web app -->
  <section id="wrapper" role="document"> 

   <section class="hero">
      ....
   </section>
      ....
   <section class="content">

   </section>

  </section>
</main>

<footer class="footer" role="footer">

      ....

</footer>

Макет одностраничного контента

Примечание. Этот макетприменяется к странице с единственным типом / темой / объектом и подходит не для всех случаев использованияосновные роли, чтобы гарантировать, что я всегда могу отличить их от других элементов верхнего / нижнего колонтитула на странице (например, простое определение CSS).

Ссылки

• role = "document" https://www.w3.org/TR/wai-aria/roles#document

  Область, содержащая связанную информацию, которая объявленав качестве содержимого документа, в отличие от веб-приложения.

• «Почему элементу <main> не требуется атрибут роли»: https://www.w3.org/TR/2012/WD-html-main-element-20121217/

  Основной элемент формализует общепринятую практику идентификации основного раздела контента документа с использованием значений идентификаторов, таких как «контент» и «основной».Он также определяет элемент HTML, который воплощает семантику и функцию ориентира WAI-ARIA role = main.

• "W3.org/Wiki объяснение вложения <section> элементов"- https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element

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

Answer 5

Обновленный метод (насколько я понимаю) может выглядеть примерно так:

<main id="content">
  <div id="inner-wrapper">
    <section>
      <h1>Section Title</h1>
      ...
    </section>
    <section>
      <h1>Section Title</h1>
      ...
    </section>
  </div>
</main>

main {
  width: 100%;
  ...
  ...
}

#inner_wrapper {
  max-width: 80%;
  margin: 0 auto;
}

См .: http://www.w3.org/TR/html-main-element/, http://www.sitepoint.com/html5-main-element/ или http://html5doctor.com/the-main-element/для получения дополнительной информации.