Тег <section>

Описание

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

Базовый синтаксис:
<section> <h2>Заголовок раздела</h2> <p>Содержимое раздела...</p> </section>

Ключевые особенности:

  • Семантический контейнер для тематической группировки
  • Должен содержать заголовок (h1-h6)
  • Используется для независимых разделов контента
  • Не является заменой div (имеет семантическое значение)
  • Улучшает доступность и SEO
Примеры использования:
<!-- Глава статьи --> <section> <h2>История HTML</h2> <p>HTML был создан Тимом Бернерсом-Ли...</p> </section> <!-- Блок на странице --> <section aria-labelledby="features-heading"> <h2 id="features-heading">Наши преимущества</h2> <div class="features-grid">...</div> </section> <!-- Вложенные секции --> <section> <h2>Глава 1</h2> <section> <h3>Подраздел 1.1</h3> <p>Содержимое подраздела...</p> </section> </section>

Рекомендации по использованию:

  • Используйте для логических разделов контента
  • Всегда включайте заголовок (видимый или через aria-labelledby)
  • Не используйте как обёртку для всего контента страницы
  • Для независимого контента применяйте <article>
  • Сочетайте с ARIA-атрибутами для улучшения доступности

Отличия от похожих тегов:

Тег Назначение
<section> Тематическая группа контента
<article> Независимый, самодостаточный контент
<div> Без семантики, только для стилизации

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

Атрибуты

accesskey Горячая клавиша для активации элемента
class CSS-классы для стилизации элемента
contenteditable Разрешает редактирование содержимого
data-* Пользовательские данные элемента
dir Направление текста (ltr|rtl)
hidden Скрывает элемент от отображения
id Уникальный идентификатор элемента
lang Язык содержимого элемента
spellcheck Включает проверку орфографии
style Инлайновые CSS-стили элемента
tabindex Порядок перехода при навигации по Tab
title Всплывающая подсказка для элемента
translate Определяет возможность перевода содержимого

Поддержка браузерами
9.0 6.0 10.6 4.0 5.0