This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<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
До
<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 # the-section-element |