Правильное использование тега <section> в HTML5: советы и примеры

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

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

Перед корректным использованием <section> обязательно присутствие внутри него заголовка (<h1>-<h6>), который бы разделить его содержимое:

HTML

Скопировать код

<section>
  <h2>Заголовок раздела</h2>
  <p>Основная часть...</p>
</section>

Пользуйтесь <section> для выделения частей контента, имеющих свой заголовок. Если требуется простой контейнер для применения стилей или скриптов, используйте <div>. Правильная семантическая структура <section> оказывает положительное влияние на доступность и SEO, делая информацию на странице более структурированной и удобной для навигации.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Различаем "Section" и "Article"

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

Необходимость заголовков и их важность

Каждый раздел <section> должен начинаться с заголовка, который предоставляет контекст последующему содержанию. Эта структура помогает поисковым системам и программам для чтения экрана ориентироваться в контенте, что повышает доступность и эффективность SEO.

Визуализация

Продемонстрируем применение тега <section> на примере дома с разными комнатами, где каждая комната выполняет свою уникальную функцию и оборудована соответствующим образом:

Markdown

Скопировать код

🏠 Дом = Веб-страница
|
├── 🚪 <section> = Гостиная (Введение)
|       🛋️ Содержание, объединённое общей темой
|
├── 🚪 <section> = Кухня (Основная часть)
|       🍳 Контент с собственным "вкусом"
|
├── 🚪 <section> = Спальня (Дополнительные разделы)
|       🛏️ Содержание, связанное с другой тематикой
|
└── 🚪 <section> = Гараж (Дополнение к теме)
        🚗 Контент, который дополняет исходную идею

Каждый <section> аналогичен отдельной комнате с чётко определённой функцией и соответствующим содержимым.

Div или Section: Как выбирать?

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

Одиночество: страница с одним разделом

Если страница состоит из одного раздела, использование <section> может показаться неразумным. В таких случаях роль контейнера полностью переходит к <body>, что делает разметку чище и семантически корректной.

SEO и семантические "плюшки"

Не забывайте о важности структурированного и семантически правильного контента, в том числе с помощью <section>. Поисковые системы предпочтительнее относятся к чётко организованной информации, что может положительно отразиться на позициях в результатах поиска.

Пример кода: Организация тематической вечеринки

HTML

Скопировать код

<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: Ссылки для пропуска навигации — Обсуждение возможностей и важности ссылок для пропуска навигации с учётом доступности веб-ресурсов.

Свежие материалы

Структуры и объединения в C

30 августа 2024

Разработка консольных приложений на C

30 августа 2024

Основы компиляции программ на C

30 августа 2024