Тег <section>

Раздел
  • Категории: Потоковое содержимое, Секционное содержимое
  • Контекст:

    Где ожидается потоковое содержимое.

  • Модель:

    Потоковое содержимое.

Тег <section> (от англ. "section" - раздел, секция) предназначен для семантического выделения разделов документа.

Например, на странице карточки товаров мы можем выделить следующие секции:

  • фотография
  • описание
  • характеристики
  • схожие товары

Сами по себе секции не являются автономными и имеют смысл только в рамках общего контекста. Это всего-лишь разделы чего-то большего.

От простой группировки их отличает наличие заголовка, либо его потенциальное присутствие. Таким образом, если группе элементов можно дать собственный заголовок, то перед вами полноценная секция / раздел.

Атрибуты

  • Глобальные атрибуты

  • Разделы страницы

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

    • О компании
    • Преимущества
    • Отзывы
    • и т.д.

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

  • Разбивка статьи

    При работе с большим текстом, мы можем разбить его на секции по главам:

  • Шапка и подвал

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

Поделитесь данной записью с друзьями