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

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

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

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

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

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

Ответ 1

Ответ в текущей спецификации:

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

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

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

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

Ссылка:

Также смотрите:

Похоже, было много путаницы в отношении этой цели элемента, но единственное, что было согласовано, это то, что она не, общая оболочка, например <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 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, но это необязательно.

Ответ 2

В W3 странице wiki о структурировании 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>

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

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

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

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

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

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

Ответ 6

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

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