Тег <section>: тематический раздел
Когда использовать section и почему разделу обычно нужен заголовок.
Зачем нужен этот элемент
section группирует материал вокруг одной темы. Например, страницу услуги можно разделить на описание, условия и ответы на вопросы. Заголовок помогает понять, зачем существует группа и как она связана с соседними разделами.
Не выбирайте section только ради рамки или отступа: для чисто визуальной обёртки достаточно div. В статье section может включать несколько абзацев и подразделов. Если дать разделу доступное имя через aria-labelledby, он может стать именованным ориентиром.
Синтаксис и пример
<section aria-labelledby="features-title">
<h2 id="features-title">Что вы изучите</h2>
<p>Разметку, оформление и публикацию сайта.</p>
</section>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| Заголовок | Обычно h2 или следующий логический уровень. |
| aria-labelledby | Ссылается на id заголовка раздела. |
| id | Позволяет ссылаться прямо на раздел. |
Частая ошибка
Каждый экран дизайна не обязан превращаться в section. Ориентируйтесь на смысл, а не на цвет фона.
Небольшая практика
Добавьте раздел «Примеры» с собственным заголовком и идентификатором. Сделайте ссылку-якорь, ведущую к нему.
Разберите также <div>, <h1>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.