<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
До
<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>
Спецификации
Specification |
---|
HTML Standard # the-section-element |
Совместимость с браузерами
BCD tables only load in the browser