<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
Смотрите также
- Связанные с этим разделом элементы:
<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 (en-US)