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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

До

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

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