HTML5 - Элемент section
Статья, в которой рассматривается HTML-элемент section
из категории sectioning.
Назначение элемента section
Элемент section
используется для создания секции в документе, которая группирует некоторый тематический контент вместе. Для каждой секции в документе следует указывать её название (тему). Это, как правило, осуществляется с помощью заголовков (элементов h1
- h6
).
<section>
<h2>Заголовок секции</h2>
<p>Содержимое секции…</p>
</section>
Элементы section
, обычно применяются в следующих случаях:
- для разметки разделов внутри секции. Например, для разметки глав в статье, вкладок в диалоговом окне, разделов в диссертации и т.п.
- для группировки нескольких секций в одну тематическую группу. Например, для группировки последних новостей на сайте, комментариев к статье и т.п.
Применение элемента section
Например, рассмотрим фрагмент кода страницы, содержащий статью с комментариями. Каждый из комментариев, оставленных пользователем на странице, содержит некоторый завершенный контент и, следовательно, может рассматриваться как элемент article
. Но, в тоже время все комментарии представляют некоторую тематическую группу, и следовательно их можно поместить в элемент section
, т.е. данный элемент сгруппирует все эти комментарии на странице вместе.
<!-- Статья -->
<article>
<!-- Заголовок статьи -->
<h1>Название статьи</h1>
<!-- Содержимое статьи -->
<p>...</p>
<!-- Секция, содержащая комментарии -->
<section>
<!-- Заголовок секции -->
<h2>Комментарии</h2>
<!-- Комментарий к посту -->
<article>
<!-- Заголовок комментария -->
<header>
<h3>Заголовок комментария</h3>
<p>...</p>
</header>
<!-- Содержимое комментария -->
<div>Текст комментария...</div>
</article>
<article>
<!-- Заголовок комментария -->
<header>
<h3>Заголовок комментария</h3>
<p>...</p>
</header>
<!-- Содержимое комментария -->
<div>Текст комментария...</div>
</article>
</section>
</article>
Вышеприведенный пример будет иметь следующую структуру (outline):
[article] Название статьи
[section] Комментарии
[article] Заголовок комментария
[article] Заголовок комментария
Например, рассмотрим применение элементов section
для создания разделов внутри элемента article
:
<!-- Книга -->
<article>
<!-- Заголовок книги -->
<header>
<h2>Название книги</h2>
<p>...</p>
</header>
<!-- Краткая информация о книге -->
<p>...</p>
<!-- 1 Глава книги -->
<section>
<h3>Первая глава</h3>
<p>...</p>
</section>
<!-- 2 Глава книги -->
<section>
<h3>Вторая глава</h3>
<p>...</p>
</section>
<!-- 3 Глава книги -->
<section>
<h3>Третья глава</h3>
<p>...</p>
</section>
<!-- Приложение A -->
<section>
<h3>Приложение A</h3>
<p>...</p>
</section>
<!-- Приложение B -->
<section>
<h3>Приложение B</h3>
<p>...</p>
</section>
</article>
Вышеприведенный пример будет иметь следующую структуру (outline):
[article] Название книги
[section] Первая глава
[section] Вторая глава
[section] Третья глава
[section] Приложение A
[section] Приложение B
Ограничения при использовании элемента section
Элемент section
в HTML 5 не является универсальным элементом для группировки содержимого, т.е. его не следует использовать для оборачивания любого понравившегося контента. Его основное назначение это добавление семантики в документ и создание его структуры (outline).
Когда автору необходимо сгруппировать контент, только для того, чтобы применить к нему стили или поработать с ним в сценарии JavaScript, ему в этом случае лучше всего будет воспользоваться элементом div
. Элемент div
в отличие от элемента section
, не добавляет семантики в документ и не участвует в создании его структуры (outline).
Отличие между элементами section и article
Элементы section
и article
хоть и кажутся на первый взгляд очень похожими, но имеют различное семантическое значение. Элемент article
предназначен для группирования контента, который представляет собой нечто завершённое, самостоятельное и которое может рассматриваться отдельно от остального содержимого страницы. А элемент section
несёт в себе другой семантический смысл, он предназначен для группировки контента, который является составной частью чего-то другого.
Но как автору узнать, что собой представляет некоторый контент на странице? Давайте рассмотрим это на примере фрагмента статьи. Фрагмент - это часть статьи и, следовательно, для группировки его контента необходимо применять элемент section
. Но этот же фрагмент, уже оставленный в качестве комментария, будет представлять собой нечто целое, завершенное. Следовательно, в этом контексте для его группировки можно использовать элемент article
. Но рассуждать, конечно, можно и наоборот. Поэтому, какой элемент использовать для группировки контента, в большинстве случаев зависит от вашего субъективного мнения как автора. Но самое главное в этом подходе поддерживаться выбранной позиции. Поэтому чем автор будет более последовательным в создании структуры, тем он сможет больше смысла в неё вложить.