Як правильно використовувати тег "section" в HTML5?

Я намагаюся створити макет у 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>тегу?

Відповідь у поточній специфікації:

Елемент розділу являє собою загальний розділ документа чи програми. У цьому контексті розділ - це тематичне групування змісту, як правило, із заголовком.

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

Авторам рекомендується використовувати елемент статті замість елемента розділу, коли було б сенс синдикувати вміст елемента .

Елемент розділу не є загальним елементом контейнера . Коли елемент потрібен для цілей стилізації або як зручність для сценаріїв, авторам рекомендується замість цього використовувати елемент div. Загальне правило полягає в тому, що елемент розділу доцільний лише в тому випадку, якщо вміст елемента буде чітко вказаний у конспекті документа .

Довідка:

• 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 містить розділ із заголовком, який є важливою частиною "потоку" сторінки (а не стороною). РОЗДІЛ - це глави, нумеровані частини документів тощо.

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

Інша річ, що стосується СЕКЦІЇ, - це те, що ви не повинні використовувати її, якщо на вашій сторінці є лише один розділ. Також у кожному розділі має бути заголовок (H1-6, HGROUP, HEADING). Заголовки "охоплюються" за допомогою РОЗДІЛУ, тому, наприклад, якщо ви використовуєте Н1 на головній сторінці (поза РОЗДІЛ), а потім Н1 всередині розділу, останні вважатимуться Н2.

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

Тож у вашому першому прикладі було б правильно, якби у вас було кілька розділів вмісту, які не можна було б охарактеризувати як СТАТТІ. (З другорядним моментом, що вам не знадобиться #primary DIV, якщо ви не хочете його для гачка стилю - P теги будуть краще).

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

СЕКЦІЙ не слід використовувати як контейнери - DIV все ще є правильним для цього та будь-яким іншим спеціальним вікном, яке ви можете придумати.

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

Елемент розділу являє собою загальний розділ документа чи програми. У цьому контексті розділ - це тематичне групування змісту, як правило, із заголовком. http://www.w3.org/TR/html5/sections.html#the-section-element

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

Елемент розділу не є загальним елементом контейнера. Коли елемент потрібен для цілей стилізації або як зручність для сценаріїв, авторам рекомендується замість цього використовувати елемент div

це просто неправильно: не обгортка. Елемент позначає семантичний розділ вашого вмісту, щоб допомогти побудувати контур документа. Він повинен містити заголовок. Якщо ви шукаєте елемент обгортки сторінки (для будь-якого аромату HTML або XHTML), подумайте про застосування стилів безпосередньо до елемента, як описано у Kroc Camen. Якщо вам все ж потрібен додатковий елемент для стилізації, використовуйте a. Як пояснює доктор Майк, div не мертвий, і якщо немає нічого іншого більш підходящого, це, мабуть, там, де ви дійсно хочете застосувати свій CSS.

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