<section>
HTML-элемент <section>
представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Например, меню навигации должно быть помещено в элемент <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> (en-US)-<h6> (en-US)) в качестве дочернего элемента. - Если имеет смысл по-особому объединить содержимое элемента
<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>
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение '<section>' в этой спецификации. |
Живой стандарт | |
HTML 5.1 Определение '<section>' в этой спецификации. |
Рекомендация | |
HTML5 Определение '<section>' в этой спецификации. |
Рекомендация |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
- Связанные с этим разделом элементы:
<body>
,<nav>
,<article>
,<aside>
, <h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US),<hgroup>
,<header>
,<footer>
,<address>
; - Разделы и структура документа HTML5.
- ARIA: роль region