Элемент 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>

Ограничения при использовании элемента section

Элемент section в HTML 5 не является универсальным элементом для группировки содержимого, т.е. его не следует использовать для оборачивания любого понравившегося контента. Его основное назначение это добавление семантики в документ и создание его структуры (outline).

Когда автору необходимо сгруппировать контент, только для того, чтобы применить к нему стили или поработать с ним в сценарии JavaScript, ему в этом случае лучше всего будет воспользоваться элементом div. Элемент div в отличие от элемента section, не добавляет семантики в документ и не участвует в создании его структуры (outline).

Заключение

Элемент <section> в HTML5 предоставляет удобный способ группировки тематического контента, обеспечивая структурирование документа и повышение его семантичности. Однако важно использовать <section> согласно его предназначению, избегая избыточного оборачивания контента и предпочитая <div> в случаях, где семантика не требуется.