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

Question

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

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

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </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>тег?

Answer 1

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

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

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

Авторам рекомендуется использовать элемент article вместо элемента 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 позволяет, но не является обязательным.

Answer 2

На вики-странице 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>

Answer 3

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

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

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

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

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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