HTML тег <section>

Значение и применение

Тег <section> (раздел) служит для группировки взаимосвязанного содержимого.

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

Как правило, у этого фрагмента есть заголовок. Выбирайте его уровень по структуре всей страницы: главный заголовок — <h1>, раздел — <h2>, подраздел — <h3>. Вложенность смыслового контейнера не начинает уровни заново. Это рекомендация к понятной структуре, а не требование всегда иметь непосредственного ребёнка-заголовок. Вложенные <article> допустимы для связанных самостоятельных материалов, например комментариев к статье.

HTML
<section> <!-- начало первой вложенной статьи -->
	<h2>Первый раздел</h2> 
	<p>Информация внутри раздела</p>
</section> <!-- конец первой вложенной статьи -->
<section> <!-- начало второй вложенной статьи -->
	<h2>Второй раздел</h2>
	<p>Информация внутри раздела</p>
</section><!-- конец второй вложенной статьи -->
<header></header>
<nav></nav>
<section>
<h2> Первый раздел </h2>
Содержимое…</section>
<section>
<h2> Второй раздел </h2>
Содержимое…</section>
<aside></aside>
<footer></footer>
Пример размещения тега <section> на странице.

Совместное использование тегов <section> и <article>

Элемент <article> можно разделить на тематические части с помощью <section>. Обычно у статьи и её разделов есть заголовки: например, <h2> у статьи и <h3> у её подразделов. Заголовок может находиться и в шапке <header>; уровень выбирают по структуре документа.

<header></header>
<nav></nav>
<article>
<h2> Название статьи </h2>
<section>
<h3> Первый раздел </h3>
Содержимое…</section>
<section>
<h3> Второй раздел </h3>
Содержимое…</section>
</article>
<aside></aside>
<footer></footer>
Пример размещения тега <section> внутри <article>.

По аналогии с вышерассмотренным примером допускается помещать элементы <article> внутрь элементов <section>, формируя при этом разделы с тематической информацией. При этом на элементы действуют те же правила по размещению заголовков:

<header></header>
<nav></nav>
<section>
<h2> Первый раздел </h2>
<article>
<h3> Первая статья </h3>
Содержимое…</article>
</section>
<section>
<h2> Второй раздел </h2>
<article>
<h3> Вторая статья </h3>
Содержимое…</article>
</section>
<aside></aside>
<footer></footer>
Пример размещения тега <article> внутри <section>.

Допускается помещать элементы <section> (раздел) в другие элементы <section>, но при этом рекомендуется учитывать следующую структуру документа:

HTML
<body>
	<h1>Заголовок первого уровня</h1>
	<section>
		<h2>Заголовок второго уровня</h2>
		<section>
			<h3>Заголовок третьего уровня</h3> 
		</section>
	</section>

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Смысловые элементы

<header></header>
<nav></nav>
<section></section>
<aside></aside>
<section></section>
<footer></footer>

Только <div>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Расположение блоков одинаковое, но смысловые теги объясняют назначение каждой части страницы.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML "Теги разметки страницы".

Для выбора контейнера проверьте назначение: <article> — самостоятельный материал, <section> — тематический раздел, <div> — группа только для оформления или скрипта. Наличие рамки или заголовка само по себе не делает блок статьёй.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьhtml.elements.section
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
section✓5✓12✓4✓11.1✓5✓18✓4✓11.1✓4.2✓1.0✓4.4✓4.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Примеры, попробуйте сами

Тематические разделы

Добавьте ещё один section с заголовком.

index.html
HTML
<main>
  <h1>Учебный курс</h1>
  <section>
    <h2>Разметка</h2>
    <p>Изучаем HTML.</p>
  </section>
  <section>
    <h2>Оформление</h2>
    <p>Изучаем CSS.</p>
  </section>
</main>

Значение CSS по умолчанию

CSS
section {
display: block;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".