<section>: Элемент раздела

Базовая линия Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Элемент <section> HTML представляет собой обобщенный автономный раздел документа, для которого нет более специфичного семантического элемента. Разделы всегда должны иметь заголовок, за исключением очень редких случаев.

Попробуйте

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

Как указано выше, <section> — это универсальный элемент раздела, и его следует использовать только в том случае, если нет более специфичного элемента для его представления. Например, навигационное меню должно быть заключено в элемент <nav>, но список результатов поиска или отображение карты и его элементы управления не имеют специфических элементов и могут быть помещены внутри <section>.

Также рассмотрите эти случаи:

Если содержимое элемента представляет собой самостоятельную, атомную единицу контента, которая имеет смысл в виде отдельного фрагмента (например, статья блога или комментарий к посту блога или новостная статья), элемент <article> будет более подходящим выбором.
Если содержимое представляет собой полезную дополнительную информацию, которая работает вместе с основным контентом, но не является его непосредственной частью (например, связанные ссылки или биография автора), используйте элемент <aside>.
Если содержимое представляет собой основную область контента документа, используйте элемент <main>.
Если вы используете этот элемент только в качестве оболочки для форматирования, используйте элемент <div> вместо него.

Повторюсь, каждый <section> должен быть идентифицирован, как правило, путем включения заголовка (h1 - h6) в качестве дочернего элемента <section> элемента, где это возможно. Ниже приведены примеры, где может встречаться <section> без заголовка.

Примеры

Пример простого использования

До

html

<div>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>

Результат

После

html

<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>

Результат

Использование раздела без заголовка

Случаи, когда вы можете увидеть <section> без заголовка, обычно встречаются в разделах веб-приложений/пользовательского интерфейса, а не в традиционных структурах документов. В документе не имеет смысла иметь отдельный раздел контента без заголовка для описания его содержимого. Такие заголовки полезны для всех читателей, но особенно полезны для пользователей вспомогательных технологий, таких как программы чтения с экрана, а также хороши для SEO.

Однако, рассмотрите вторичный механизм навигации. Если глобальная навигация уже обернута в элемент <nav>, вы могли бы обернуть предыдущий/следующий пункт меню в <section>:

html

<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

Или что насчет панели кнопок для управления вашим приложением? Возможно, она не нуждается в заголовке, но все же представляет собой отдельный раздел документа:

html

<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

Результат

В зависимости от содержимого, добавление заголовка может быть полезно для SEO, поэтому это вариант, который стоит рассмотреть.

Техническое описание

Категории содержимого	Потоковое содержимое, Разделяющее содержимое, Осязаемое содержимое.
Разрешенное содержимое	Потоковое содержимое.
Пропуск тега	Нет, и открывающий, и закрывающий теги обязательны.
Разрешенные родительские элементы	Любой элемент, который принимает потоковое содержимое. Обратите внимание, что элемент `<section>` не должен быть потомком элемента `<address>`.
Неявная роль ARIA	`region` если у элемента есть доступное имя, в противном случае `generic`

Разрешенные роли ARIA	`alert`, `alertdialog`, `application`, `banner`, `complementary`, `contentinfo`, `dialog`, `document`, `feed`, `log`, `main`, `marquee`, `navigation`, `none`, `note`, `presentation`, `search`, `status`, `tabpanel`
Интерфейс DOM	`HTMLElement`

Спецификации

Спецификация
Стандарт HTML # the-section-element

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`section`	5	12	4	11.1	5	18	4	11.1	4.2	1.0	4.4

См. также

Другие элементы, связанные с разделами: <body>, <nav>, <article>, <aside>, h1, h2, h3, h4, h5, h6, <hgroup>, <header>, <footer>, <address>
Использование HTML-разделов и оглавлений
ARIA: роль области
Почему следует выбирать HTML5 article вместо section, Брюс Лоусон

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section