Вложенные теги HTML5

Ответ 1

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

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

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

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

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

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

<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>

Ответ 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>

Ответ 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/

Ответ 4

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

<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/ для получения дополнительной информации.

Ответ 5

Мои личные рекомендации состоят в том, чтобы максимально использовать семантическую структуру при создании макетов 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>

Макет содержимого одной страницы

Примечание. Этот макет применяется к странице с уникальным/тематическим/объектом и не подходит для всех случаев использования.

<article>
  <header>
    <h1>Page Headline/Title</h1>
  </header>
  <section class="page-content">
      ....
  </section>
  <!-- if this is a post or something with metadata/authorship info... -->
  <footer>
    ....
  </footer>
</article>

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

Ссылки

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

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

• "Зачем элементу <main> не нужен атрибут роли": https://www.w3.org/TR/2012/WD-html-main-element-20121217/

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

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

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