<section>

HTML-элемент <section> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.

Например, меню навигации должно быть помещено в элемент <nav>, но список результатов поиска и отображение карты с ее элементами управления не имеют специфических элементов и могут быть помещены в <section>.

Заметка: Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент <article> может стать лучшим выбором.

Категории контента Основной поток, секционный контент, явный контент.
Разрешенное содержимое Основной поток
Пропуск тега Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Разрешенные родительские элементы Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <section> не должен быть потомком элемента <address>.
Разрешенные роли ARIA alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, search, status, tabpanel
DOM-интерфейс HTMLElement

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

  • Каждый элемент <section> должен быть идентифицирован, обычно путем добавления заголовка (элементы <h1>-<h6>) в качестве дочернего элемента.
  • Если имеет смысл по-особому объединить содержимое элемента <section> (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент <article>.
  • Не используйте элемент <section> как общий контейнер; для этого есть <div>, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.

Пример 1

До

<div>
  <h1>Заголовок</h1>
  <p>Много замечательного контента</p>
</div>

После

<section>
  <h1>Заголовок</h1>
  <p>Много замечательного контента</p>
</section>

Пример 2

До

<div>
  <h2>Заголовок</h2>
  <img src="bird.jpg" alt="птица">
</div>

После

<section>
  <h2>Заголовок</h2>
  <img src="bird.jpg" alt="птица">
</section>

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

Поддержка браузерами

BCD tables only load in the browser

Смотрите также