Получить профессию в Skypro
Правильное использование тега <section> в HTML5: советы и примеры
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Тег <section> в HTML5 разработан для группировки содержимого, объединённого общей темой и имеющего самостоятельный заголовок. Этот тег используется для выделения различных разделов документа или приложения, например, глав, вкладок или тем статьи.
Перед корректным использованием <section> обязательно присутствие внутри него заголовка (<h1>-<h6>), который бы разделить его содержимое:
<section>
<h2>Заголовок раздела</h2>
<p>Основная часть...</p>
</section>Пользуйтесь <section> для выделения частей контента, имеющих свой заголовок. Если требуется простой контейнер для применения стилей или скриптов, используйте <div>. Правильная семантическая структура <section> оказывает положительное влияние на доступность и SEO, делая информацию на странице более структурированной и удобной для навигации.
Различаем "Section" и "Article"
При выборе между <section> и <article> учитывайте контекст и назначение материала. <article> подходит для автономных статей, предназначенных для распространения, как новости или посты в блогах. <section>, в свою очередь, служит для создания тематических групп в рамках документа.
Необходимость заголовков и их важность
Каждый раздел <section> должен начинаться с заголовка, который предоставляет контекст последующему содержанию. Эта структура помогает поисковым системам и программам для чтения экрана ориентироваться в контенте, что повышает доступность и эффективность SEO.
Визуализация
Продемонстрируем применение тега <section> на примере дома с разными комнатами, где каждая комната выполняет свою уникальную функцию и оборудована соответствующим образом:
🏠 Дом = Веб-страница
|
├── 🚪 <section> = Гостиная (Введение)
| 🛋️ Содержание, объединённое общей темой
|
├── 🚪 <section> = Кухня (Основная часть)
| 🍳 Контент с собственным "вкусом"
|
├── 🚪 <section> = Спальня (Дополнительные разделы)
| 🛏️ Содержание, связанное с другой тематикой
|
└── 🚪 <section> = Гараж (Дополнение к теме)
🚗 Контент, который дополняет исходную идеюКаждый <section> аналогичен отдельной комнате с чётко определённой функцией и соответствующим содержимым.
Div или Section: Как выбирать?
Для стилизации и работы с JavaScript часто вполне достаточно использовать <div>, в то время как <section> создан для формирования семантической структуры документа. Если содержимое не формирует естественную группу и не сопровождается заголовком, лучше воспользоваться <div>, чтобы избежать семантических путаниц.
Одиночество: страница с одним разделом
Если страница состоит из одного раздела, использование <section> может показаться неразумным. В таких случаях роль контейнера полностью переходит к <body>, что делает разметку чище и семантически корректной.
SEO и семантические "плюшки"
Не забывайте о важности структурированного и семантически правильного контента, в том числе с помощью <section>. Поисковые системы предпочтительнее относятся к чётко организованной информации, что может положительно отразиться на позициях в результатах поиска.
Пример кода: Организация тематической вечеринки
<body>
<!-- Приветствие: Вводная часть страницы -->
<section>
<h1>Добро пожаловать на нашу веб-вечеринку</h1>
<p>Предлагаю вам приветственный напиток... 🍹</p>
</section>
<!-- Основная часть: Содержание -->
<section>
<h2>Насыщенная тема</h2>
<p>Самое время для основного блюда... 🍲</p>
</section>
<!-- Дополнение: Разделы с десертами -->
<section>
<h2>Время десертов</h2>
<!-- Все любят десерты, не так ли? 😉 -->
<article>
<h3>Интересная тема юзабилити</h3>
<p>Небольшая порция подтемы... 🍨</p>
</article>
<article>
<h3>Интересное о пользовательском интерфейсе</h3>
<p>Часть ещё одной подтемы... 🍰</p>
</article>
</section>
</body>Такая организация помогает упорядочить информацию, предоставив контекст и значимость как для пользователей, так и для поисковых механизмов.
Полезные материалы
- The section element | HTML5 Doctor — Глубокий анализ элемента
<section>в HTML5 и советы по его применению. - HTML Standard — Официальная спецификация HTML5 для элемента
<section>. - <section>: The thematic section element in HTML | MDN — Детальные руководства MDN по элементу
<section>, включая примеры использования. - Предварительный обзор HTML 5 – A List Apart — Обзор роли и различия между
<article>и<section>в контексте HTML5. - Как структурировать ваш HTML | CSS-Tricks — Советы и приёмы для разделения страницы с использованием секционных элементов в HTML5.
- Структурные регионы страницы | Инициатива Веб-Доступности (WAI) | W3C — Практическое руководство по обеспечению доступности с помощью структурирования HTML5.
- WebAIM: Ссылки для пропуска навигации — Обсуждение возможностей и важности ссылок для пропуска навигации с учётом доступности веб-ресурсов.