<section> – узагальнений елемент розділу

Елемент HTML <section> (розділ) представляє узагальнений самостійний розділ документа, для представлення якого немає конкретнішого семантичного елемента. Розділи завжди повинні мати заголовок, і винятки з цього правила – дуже рідкісні.

Спробуйте його в дії

Атрибути

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

Примітки щодо використання

Як згадувалось вище, <section> є узагальненим розділовим елементом, і його слід використовувати лише тоді, коли немає більш конкретного елемента для представлення вмісту. Наприклад, глобальне меню навігації слід загортати в елемент <nav>, але список результатів пошуку або виведення карти та її елементи управління не мають конкретних відповідних елементів і можуть бути поміщені всередину <section>.

Також слід розглянути такі випадки:

  • Якщо вміст елемента є самостійною, неподільною одиницею вмісту, яку є сенс подавати як самостійний твір (наприклад, допис у блозі чи коментар у блозі, або стаття у газеті), краще використовувати елемент <article>.
  • Якщо цей вміст представляє додаткову інформацію, яка корисна поруч з основним вмістом, але не є його безпосередньою частиною (наприклад, пов'язані посилання або біографія автора), використовуйте <aside>.
  • Якщо вміст представляє головну область вмісту документа, використовуйте <main>.
  • Якщо елемент використовується суто як обгортка для стилізації, використовуйте краще <div>.

Іще одне повторення: кожен <section> повинен бути підписаний, зазвичай шляхом додавання заголовка (елемент h1 – h6) як дочірнього щодо <section> елемента, де це можливо. Нижче дивіться приклади того, де можна зустріти <section> без заголовка.

Приклади

Приклад базового застосування

До

<div>
  <h2>Заголовок</h2>
  <p>Купа крутого вмісту</p>
</div>
Результат

Після

<section>
  <h2>Заголовок</h2>
  <p>Купа крутого вмісту</p>
</section>
Результат

Використання розділу без заголовка

Умови, за яких можна зустріти <section> без заголовка, зазвичай трапляються в розділах вебзастосунків або інтерфейсів користувача, а не в структурах традиційних документів. У документі не дуже логічно мати окремий розділ вмісту без заголовка, що описує його вміст. Такі заголовки корисні для всіх читачів, але особливо корисні для користувачів допоміжних технологій, як-от читачі з екрана, а також вони добрі для SEO.

Проте розгляньмо другорядний механізм навігації. Якщо глобальна навігація вже загорнута в елемент <nav>, то можна загорнути меню переходу назад і далі в <section>:

<section>
  <a href="#">Попередня стаття</a>
  <a href="#">Наступна стаття</a>
</section>

Або як щодо панелі кнопок для керування застосунком? Тоді не обов'язково потрібен заголовок, але це все одно окремий розділ документа:

<section>
  <button class="reply">Відповісти</button>
  <button class="reply-all">Відповісти всім</button>
  <button class="fwd">Переслати</button>
  <button class="del">Видалити</button>
</section>

Результат

Залежно від вмісту, додавання заголовка може також бути корисним для SEO, тому це варто розглянути.

Технічний підсумок

Категорії вмісту Потоковий вміст, Розділовий вміст, відчутний вміст.
Дозволений вміст Потоковий вміст.
Пропуск тега Немає, обов'язкові як початковий, так і кінцевий теги.
Дозволені батьківські елементи Всі елементи, що приймають потоковий вміст. Зверніть увагу на те, що елемент <section> повинен не бути нащадком елемента <address>.
Неявна роль ARIA region, якщо елемент має доступну назву, інакше – generic
Дозволені ролі ARIA alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel
Інтерфейс DOM HTMLElement

Специфікації

Специфікація
HTML Standard (HTML)
# the-section-element

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
section
Chrome Full support 5
 Edge Full support 12
 Firefox Full support 4
 Internet Explorer Full support 9
 Opera Full support 11.1
 Safari Full support 5
 WebView Android Full support Так
 Chrome Android Full support Так
 Firefox for Android Full support 4
 Opera Android Full support 11.1
 Safari on iOS Full support 4.2
 Samsung Internet Full support Так

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.