HTML · семантика

Тег section: тематический раздел

section объединяет самостоятельную тематическую часть документа. Обычно у такого раздела есть заголовок, по которому его можно добавить в оглавление страницы.

Пример раздела

На странице курса отдельными секциями могут быть программа, преподаватели и отзывы. Каждая часть раскрывает свою тему и получает заголовок.

<section aria-labelledby="program-title">
  <h2 id="program-title">Программа курса</h2>
  <p>Двенадцать уроков и четыре практических проекта.</p>
</section>

Section или div

Если контейнер нужен только для сетки, фона или ограничения ширины, выбирай div. Если содержимое образует именованный раздел документа, подходит section.

<section>
  <h2>Отзывы учеников</h2>
  <div class="reviews-grid">...</div>
</section>

Section или article

article подходит материалу, который сохраняет смысл отдельно от страницы: статье, новости, карточке публикации. section обычно является частью текущего документа и раскрывает одну его тему.

Частые ошибки

Section без смыслового заголовка.
Замена всех div на section.
Несколько несвязанных тем внутри одного раздела.
Выбор тега по стандартным стилям браузера.

Практика

Раздели лендинг курса на секции «О курсе», «Программа» и «Отзывы». Внутри каждой используй h2 и подходящие элементы содержимого.

Связанные темы

div и span · Тег article · Заголовки