<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
# the-section-element

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
section

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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