<section> - элемент секции

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

HTML-элемент <section> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок.

Интерактивный пример

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>

h1,
h2 {
  margin: 0;
}

Например, меню навигации должно быть помещено в элемент <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>

Связанные с этим разделом элементы: <body>, <nav>, <article>, <aside>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>, <header>, <footer>, <address>;
Разделы и структура документа HTML5.
ARIA: роль region

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 15 апр. 2025 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

<section> - элемент секции

In this article

Интерактивный пример

Атрибуты

Примечание

Пример 1

До

После

Пример 2

До

После

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

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

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

Help improve MDN