<section> - HTML елемент секції

HTML-елемент <section> представляє собою загальну секцію в документі. Він використовується для групування тематично пов'язаного контенту.

Елемент <section> використовується для групування контенту, який має спільну тему. Кожна секція, як правило, повинна мати заголовок (<h1>-<h6>), який ідентифікує її тему.

Якщо вміст є самодостатнім і може існувати незалежно (наприклад, допис у блозі або новина), краще використовувати тег <article>. Якщо елемент потрібен лише для стилізації, використовуйте <div>.

Загальне правило: використовуйте <section>, тільки якщо вміст елемента буде логічно виглядати в структурі документа (outline).

HTML
<section>
  <h2>Заголовок секції</h2>
  <p>Вміст секції...</p>
</section>

Атрибути

Цей тег може мати глобальні атрибути.

Технічне резюме

Категорія контенту	Потоковий контент, секційний контент, відчутний контент.
Дозволений вміст	Потоковий контент.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає потоковий контент. Елемент `<section>` не повинен бути нащадком елемента `<address>`.
Роль ARIA	`region` (якщо має доступне ім’я), інакше немає відповідної ролі.
DOM інтерфейс	`HTMLElement`

Приклади використання

<article>
  <h1>Все про HTML</h1>
  <p>Вступна частина статті.</p>

  <section>
    <h2>Історія HTML</h2>
    <p>Деталі про історію...</p>
  </section>

  <section>
    <h2>Сучасні стандарти</h2>
    <p>Інформація про HTML5...</p>
  </section>
</article>

<section>
  <h2>Про компанію</h2>
  <p>Наша місія та цінності...</p>
</section>

<section>
  <h2>Наші послуги</h2>
  <ul>
    <li>Веб-розробка</li>
    <li>Дизайн</li>
    <li>Маркетинг</li>
  </ul>
</section>

Стилі за замовчуванням

CSS
section {
  display: block;
}

Підтримка браузерів



`<section>`