Как правильно использовать тег «section» в HTML5?

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

Ниже представлены варианты, с которыми я возвращаюсь:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

Можете ли вы использовать тег section, чтобы действовать как контейнер?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

Как правильно использовать <section>тег?

Ответ находится в текущей спецификации:

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

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

Авторам рекомендуется использовать элемент article вместо элемента section, когда имеет смысл синдицировать содержимое элемента .

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

Ссылка:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Также см:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

Похоже, что существует большая путаница в отношении назначения этого элемента, но единственное, что было согласовано, это то, что это не универсальная оболочка, как <div>есть. Его следует использовать для семантических целей, а не для перехвата CSS или JavaScript (хотя он, безусловно, может быть стилизован или «написан» по сценарию).

Насколько я понимаю, лучший пример может выглядеть примерно так:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Обратите внимание, что <div>, будучи полностью несемантичным, его можно использовать в любом месте документа, если это разрешено спецификацией HTML, но это не обязательно.

На вики-странице W3 о структурировании HTML5 говорится:

<section>: Используется для группировки разных статей по разным целям или темам или для определения разных разделов одной статьи.

И затем отображает изображение, которое я очистил:

Также важно знать, как использовать <article>тег (из той же ссылки W3 выше):

<article> относится к <section> , но явно отличается. В то время как <section>предназначен для группировки отдельных разделов контента или функций, он <article>предназначен для содержания связанных отдельных автономных частей контента, таких как отдельные сообщения в блогах, видео, изображения или новости. Подумайте об этом так: если у вас есть несколько элементов контента, каждый из которых может быть пригоден для чтения отдельно и имеет смысл объединять в виде отдельных элементов в RSS-канал, тогда <article>он подходит для их разметки.

В нашем примере <section id="main"> содержит записи в блоге. Каждая запись в блоге подходит для распространения в виде элемента в RSS-канале и имеет смысл при чтении отдельно, вне контекста, поэтому <article>идеально подходит для них:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Просто да? Однако имейте в виду, что вы также можете вкладывать разделы в статьи, где это имеет смысл. Например, если каждое из этих сообщений в блоге имеет последовательную структуру отдельных разделов, вы также можете разместить разделы внутри своих статей. Это могло выглядеть примерно так:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

Насколько я понимаю, SECTION содержит раздел с заголовком, который является важной частью «потока» страницы (а не второстепенным). РАЗДЕЛЫ - это главы, пронумерованные части документов и так далее.

СТАТЬЯ предназначена для синдицированного контента - например, сообщений, новостей и т. Д. СТАТЬЯ и РАЗДЕЛ полностью разделены - вы можете иметь одно без другого, поскольку это очень разные варианты использования.

Еще одна особенность SECTION заключается в том, что вы не должны использовать его, если на вашей странице есть только один раздел. Также у каждого раздела должен быть заголовок (H1-6, HGROUP, HEADING). Заголовки «ограничены» внутри РАЗДЕЛА, поэтому, например, если вы используете H1 на главной странице (вне РАЗДЕЛА), а затем H1 внутри раздела, последний будет рассматриваться как H2.

Примеры в спецификации довольно хороши на момент написания.

Итак, в вашем первом примере было бы правильно, если бы у вас было несколько разделов контента, которые нельзя было описать как СТАТЬИ. (С незначительным замечанием, что вам не понадобится #primary DIV, если вы не хотите его для стилевого хука - теги P были бы лучше).

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

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

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

Элемент section представляет собой общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком. http://www.w3.org/TR/html5/sections.html#the-section-element

Правильный метод - №2. Вы использовали тег section для определения раздела вашего документа. Из спецификаций http://www.w3.org/TR/html5/sections.html :

Элемент section не является универсальным контейнерным элементом. Когда элемент необходим для стилизации или для удобства написания сценариев, авторам рекомендуется использовать вместо него элемент div.

вот только неправильно: это не обертка. Элемент обозначает семантический раздел вашего контента, помогающий построить структуру документа. Он должен содержать заголовок. Если вы ищете элемент-оболочку страницы (для любого варианта HTML или XHTML), рассмотрите возможность применения стилей непосредственно к элементу, как описано Крок Камен. Если вам все еще нужен дополнительный элемент для стилизации, используйте файл. Как объясняет доктор Майк, div не умер, и если нет ничего более подходящего, вероятно, именно там вы действительно хотите применить свой CSS.

вы можете проверить это: http://html5doctor.com/avoiding-common-html5-mistakes/