<section> - элемент секции

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

Интерактивный пример

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

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

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

Атрибуты

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

Примечание

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

Пример 1

До

html

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

После

html

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

Пример 2

До

html

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

После

html

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

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

Specification
HTML Standard
# the-section-element

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

BCD tables only load in the browser

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