Тег section в HTML - семантическая разметка структуры страницы

Введение

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

Смотрите, я покажу вам, как думать о section. Представьте, что у вас есть статья, лендинг или страница документации. Там есть логические блоки — вводная часть, список преимуществ, блок с отзывами, FAQ, контакты. Каждый из этих блоков можно оформить как отдельный смысловой раздел. Именно для этого и создан section.

В этой статье вы разберетесь:

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

Давайте по порядку.

Что такое тег section по спецификации HTML

Определение и назначение

Согласно спецификации HTML Living Standard, section — это автономный тематический раздел документа, который обычно сопровождается заголовком.

Если сформулировать проще:

• section — это блок, который имеет общую тему
• внутри section обычно есть заголовок уровня h1–h6
• section используется, когда есть смысл выделять блок как отдельный раздел документа

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

Базовый синтаксис

Теперь вы увидите, как это выглядит в коде:

<section>
  <h2>О компании</h2> <!-- Заголовок раздела -->

  <p>Мы занимаемся разработкой веб-приложений и сервисов.</p>
  <p>Наша команда состоит из опытных разработчиков и дизайнеров.</p>
</section>

Комментарии в этом примере подсказывают, что:

• сам section не добавляет стили
• смысл раздела задается заголовком
• содержимое внутри объединено общей темой

Когда использовать section, а когда нет

Типичные случаи, когда section уместен

Давайте разберемся на примерах, где section действительно помогает:

1. Разделы длинной статьи или документации

<article>
  <h1>Руководство по HTML5</h1>

  <section>
    <h2>Что нового в HTML5</h2>
    <!-- Описание новых возможностей -->
  </section>

  <section>
    <h2>Семантические теги</h2>
    <!-- Объяснение article, section, header и т.д. -->
  </section>
</article>

Здесь каждый section — логический раздел статьи.

2. Секции лендинга

<main>
  <section>
    <h1>Онлайн-курс по HTML и CSS</h1>
    <!-- Герой-блок с заголовком и кнопкой -->
  </section>

  <section>
    <h2>Что вы получите на курсе</h2>
    <!-- Список преимуществ -->
  </section>

  <section>
    <h2>Отзывы студентов</h2>
    <!-- Слайдер или карточки отзывов -->
  </section>
</main>

Как видите, каждый section описывает отдельный тематический блок страницы.

3. Отдельные смысловые блоки внутри article

<article>
  <h1>Как использовать семантическую разметку</h1>

  <section>
    <h2>Почему семантика важна</h2>
    <!-- Описание причин -->
  </section>

  <section>
    <h2>Основные семантические теги</h2>
    <!-- Перечень тегов -->
  </section>
</article>

Когда section использовать не нужно

Теперь давайте посмотрим, когда section будет лишним и даже вредным:

1. Просто для оформления

Если вы хотите просто сгруппировать элементы для стилизации (например, обернуть в блок, чтобы задать отступы или фон), лучше использовать div:

<div class="card">
  <!-- Это просто визуальный блок карточки, не тематический раздел -->
  <h3>Тариф Старт</h3>
  <p>Подходит для небольших проектов.</p>
</div>

Здесь нет отдельной структурной части документа. Это элемент интерфейса, а не логический раздел страницы.

2. Когда нет заголовка и темы

Если вы не можете сформулировать заголовок для блока, скорее всего, это не section. Например:

<div class="product-card">
  <img src="phone.png" alt="Смартфон X">
  <p>Описание товара</p>
  <button>Купить</button>
</div>

Это элемент интерфейса, а не тематический раздел.

3. Вместо article, nav, aside, header, footer

Если у блока уже есть подходящий семантический тег, section не нужен:

• для целой статьи, поста, записи в блоге — article
• для навигации — nav
• для боковой панели — aside
• для шапки раздела или страницы — header
• для подвала раздела или всей страницы — footer

Отличия section от других тегов

section vs div

Давайте сравним section и div, потому что именно здесь чаще всего возникает путаница.

• div — не несет семантики. Это просто контейнер для стилизации и группировки.
• section — семантический тег. Обозначает тематический раздел, обычно с заголовком.

Пример неправильного использования section:

<section class="container">
  <!-- Здесь section используется только ради класса container -->
</section>

Так делать не стоит, потому что:

• у блока нет заголовка
• у блока нет отдельной темы
• его цель — просто разметка и стили, а не смысл

Лучше так:

<div class="container">
  <!-- Визуальный контейнер для центрирования контента -->
  <section>
    <h2>Наши услуги</h2>
    <!-- Список услуг -->
  </section>
</div>

Здесь div решает задачу верстки, а section — задачу семантики.

section vs article

Еще одна частая путаница — с тегом article.

article — это независимый, самодостаточный фрагмент контента, который можно вынести из контекста и он все равно будет понятен:

• пост в блоге
• новостная статья
• карточка товара с полным описанием
• комментарий, отзыв

section — раздел документа, который часто существует в составе чего-то большего (страницы, статьи, лендинга).

Пример:

<article>
  <h1>10 советов по верстке</h1>

  <section>
    <h2>Используйте семантические теги</h2>
    <p>Это улучшает доступность и SEO.</p>
  </section>

  <section>
    <h2>Следите за иерархией заголовков</h2>
    <p>Не пропускайте уровни заголовков.</p>
  </section>
</article>

Здесь:

• article — самостоятельная статья
• section — смысловые части внутри статьи

section vs header, footer и main

Кратко покажу, как section сочетается с другими семантическими тегами.

<body>
  <header>
    <!-- Шапка сайта -->
  </header>

  <main>
    <!-- Основное содержимое страницы -->
    <section>
      <h1>О компании</h1>
      <!-- Основной контент раздела -->
    </section>

    <section>
      <h2>Наши услуги</h2>
      <!-- Описание услуг -->
    </section>
  </main>

  <footer>
    <!-- Подвал сайта -->
  </footer>
</body>

Здесь структура такова:

• header и footer — общие оболочки для шапки и подвала
• main — основная область контента страницы
• section — логические блоки внутри main

Важно понимать, что section можно использовать внутри article, main, header, footer, aside, но не вместо них.

Правильная работа с заголовками внутри section

Обязателен ли заголовок внутри section

Спецификация и рекомендации по доступности говорят: раздел должен иметь заголовок. Без заголовка смысл раздела теряется.

Формально браузер не запретит вам сделать section без заголовка, но для скринридеров и структуры документа это будет минус.

Так лучше не делать:

<section>
  <!-- Нет заголовка, непонятно, о чем раздел -->
  <p>Немного текста про компанию.</p>
</section>

А так — правильно:

<section>
  <h2>О компании</h2> <!-- Заголовок раздела -->
  <p>Немного текста про компанию.</p>
</section>

Иерархия заголовков и вложенные section

Теперь давайте перейдем к следующему шагу — вложенным разделам.

Пример:

<article>
  <h1>Гид по основам HTML</h1>

  <section>
    <h2>Семантические теги</h2>

    <section>
      <h3>Теги article и section</h3>
      <p>Описание различий.</p>
    </section>

    <section>
      <h3>Теги header и footer</h3>
      <p>Где и как их применять.</p>
    </section>
  </section>
</article>

Обратите внимание, как устроены заголовки:

• h1 — заголовок всей статьи
• h2 — заголовок крупного раздела внутри статьи
• h3 — заголовки подразделов

Такую структуру проще воспринимать:

• пользователям
• поисковым системам
• скринридерам

Можно ли пропускать уровни заголовков

Технически браузер отобразит заголовки и так:

<h1>...</h1>
<h3>...</h3>

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

• h1
  
  • h2
    
    • h3

гораздо понятнее и для людей, и для машин.

Примеры использования section на реальных страницах

Страница блога или статьи

Покажу вам, как это реализовано на практике для длинной статьи.

<main>
  <article>
    <header>
      <h1>Как правильно использовать тег section</h1>
      <p>Дата публикации 12 мая 2025</p>
    </header>

    <section>
      <h2>Описание тега section</h2>
      <p>Section — это семантический тег для тематических разделов.</p>
    </section>

    <section>
      <h2>Когда использовать section</h2>
      <p>Его стоит применять для логических блоков с заголовком.</p>
    </section>

    <section>
      <h2>Частые ошибки</h2>
      <p>Ошибка номер один — использование section как div.</p>
    </section>

    <footer>
      <p>Автор статьи Олег Марков</p>
    </footer>
  </article>
</main>

Здесь section помогает разбить длинный текст на понятные разделы с заголовками.

Лендинг с несколькими блоками

Давайте посмотрим, что происходит в следующем примере типичного лендинга:

<main>
  <!-- Герой-блок -->
  <section id="hero">
    <h1>Сервис аналитики для вашего бизнеса</h1>
    <p>Собирайте и анализируйте данные в одном месте.</p>
    <button>Попробовать бесплатно</button>
  </section>

  <!-- Блок с преимуществами -->
  <section id="features">
    <h2>Преимущества сервиса</h2>
    <ul>
      <li>Простая интеграция</li>
      <li>Наглядные отчеты</li>
      <li>Круглосуточная поддержка</li>
    </ul>
  </section>

  <!-- Блок с тарифами -->
  <section id="pricing">
    <h2>Тарифы</h2>

    <div class="pricing-grid">
      <!-- Здесь div используется для сетки, не для семантики -->
      <article class="plan">
        <h3>Старт</h3>
        <p>Для небольших проектов.</p>
      </article>

      <article class="plan">
        <h3>Бизнес</h3>
        <p>Для растущих команд.</p>
      </article>
    </div>
  </section>

  <!-- Блок с контактами -->
  <section id="contacts">
    <h2>Контакты</h2>
    <p>Email support@example.com</p>
  </section>
</main>

Здесь несколько важных моментов:

• каждый крупный блок лендинга — отдельный section
• у каждого section есть заголовок
• для повторяющихся самостоятельных элементов (тарифы) используется article
• div применяется только для сетки и стилизации

section и доступность (a11y)

Как скринридеры видят section

Семантические теги помогают технологиям доступности понимать структуру страницы. Скринридеры могут перемещаться между:

• заголовками
• основными областями (main, nav, footer)
• иногда между разделами

Если внутри section есть заголовок, пользователю будет проще понять, в каком разделе он сейчас находится.

Пример разметки, которая помогает навигации:

<main>
  <section aria-labelledby="about-title">
    <h2 id="about-title">О компании</h2>
    <p>Мы работаем с 2010 года.</p>
  </section>

  <section aria-labelledby="services-title">
    <h2 id="services-title">Услуги</h2>
    <p>Мы предлагаем разработку и поддержку проектов.</p>
  </section>
</main>

Комментарии тут не нужны, структура и так очевидна, но вы видите, что:

• атрибут aria-labelledby связывает section с конкретным заголовком
• скринридер может использовать этот заголовок как имя раздела

Использование ARIA-атрибутов с section

Чаще всего section достаточно и без дополнительных атрибутов, но иногда добавляют:

• aria-labelledby — чтобы явно связать раздел с заголовком
• aria-label — если заголовка нет визуально, но нужен текст для скринридера

Например:

<section aria-label="Отзывы клиентов">
  <!-- Визуально может быть только слайдер без h2, но для доступности мы задаем имя -->
  <!-- Однако лучше все равно добавить видимый заголовок -->
</section>

Лучший вариант все же такой:

<section>
  <h2>Отзывы клиентов</h2>
  <!-- Слайдер с отзывами -->
</section>

То есть ARIA полезна, но не должна подменять обычные заголовки, если их можно вывести.

section и SEO

Влияет ли section на ранжирование напрямую

Поисковые системы не дают прямых гарантий, что сам факт использования section улучшит позиции в выдаче. Но section:

• улучшает структуру документа
• помогает поисковому роботу лучше понимать, какие блоки о чем
• делает заголовки более логичными

В совокупности это положительно влияет на восприятие страницы алгоритмами.

Важно понимать:

• section без нормальных заголовков и смысла не помогает
• сама по себе замена div на section без логики — не SEO-оптимизация

Практическое влияние на сниппеты и анализ содержания

Section-контейнеры, оформленные с заголовками h2–h3 и содержательным текстом, помогают:

• формировать более понятную структуру документа
• делать фрагменты (featured snippets) более точными
• улучшать разметку «под заголовки» в результатах выдачи

Пример структуры, удобной и для пользователей, и для роботов:

<article>
  <h1>Как выбрать хостинг для сайта</h1>

  <section>
    <h2>Виды хостинга</h2>
    <p>Шерид хостинг, VPS, выделенный сервер.</p>
  </section>

  <section>
    <h2>На что обратить внимание</h2>
    <p>Надежность, поддержка, масштабируемость.</p>
  </section>

  <section>
    <h2>Рекомендации по выбору</h2>
    <p>Сравните тарифы и отзывы перед покупкой.</p>
  </section>
</article>

Каждый раздел может быть использован поисковой системой как логический блок с конкретным ответом на запрос.

Вложенность section и сложные структуры

Можно ли вкладывать section друг в друга

Да, спецификация разрешает вложенные section. Но важно контролировать, чтобы:

• у каждого вложенного раздела был свой заголовок
• вложенность не была чрезмерной и не путала пользователей

Пример:

<section>
  <h2>Семантическая разметка</h2>

  <section>
    <h3>Базовые теги</h3>
    <p>article, section, header, footer, nav.</p>
  </section>

  <section>
    <h3>Теги для текста</h3>
    <p>p, h1–h6, blockquote, figure и т.д.</p>
  </section>
</section>

Здесь:

• внешний section задает общую тему
• внутренние section — подтемы

Когда вложенность уже лишняя

Если вы замечаете, что у вас section → section → section без явной необходимости, вероятно, часть из них стоит заменить на div или вообще просто на группы элементов.

Плохой пример:

<section>
  <h2>Команда</h2>

  <section>
    <h3>Отдел разработки</h3>

    <section>
      <h4>Backend-разработчики</h4>
      <!-- список сотрудников -->
    </section>
  </section>
</section>

Здесь вложенность слишком глубокая для обычной страницы. Часть этих уровней можно заменить на div или списки.

Лучше так:

<section>
  <h2>Команда</h2>

  <section>
    <h3>Отдел разработки</h3>
    <h4>Backend-разработчики</h4>
    <!-- список сотрудников -->
  </section>
</section>

section и стилизация CSS

Как стилизовать section

С точки зрения CSS section — такой же блочный элемент, как div. Вы можете присваивать ему классы, идентификаторы и любые стили.

Пример:

<section class="promo">
  <h2>Специальное предложение</h2>
  <p>Скидка 30 процентов на первый месяц.</p>
</section>

/* Здесь мы задаем стили для промо-раздела */
section.promo {
  padding: 40px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

Комментарии в CSS поясняют, что это просто стили для конкретного смыслового блока.

Совмещение семантики и утилитарных классов

Часто section комбинируют с общими классами для отступов, сетки и т.п.:

<section class="section section--gray container">
  <h2>Преимущества</h2>
  <ul class="benefits-list">
    <li>Быстрота</li>
    <li>Надежность</li>
    <li>Поддержка</li>
  </ul>
</section>

Здесь:

• section — задает семантику
• classes — используются для стилизации и сетки

Суть в том, что не нужно выбирать между семантикой и удобством верстки — их легко совместить.

Типичные ошибки при использовании section

Ошибка 1 — section без заголовка

<section>
  <!-- Нет заголовка -->
  <p>Наши клиенты по всему миру.</p>
</section>

Почему это ошибка:

• скринридеры не получают название раздела
• сложно понять, что это за блок в структуре документа

Как исправить:

<section>
  <h2>Наши клиенты</h2>
  <p>Наши клиенты по всему миру.</p>
</section>

Ошибка 2 — использование section только ради стилей

<section class="wrapper">
  <!-- Section используется как обычный контейнер -->
</section>

Лучше так:

<div class="wrapper">
  <section>
    <h2>Новости</h2>
    <!-- Список новостей -->
  </section>
</div>

Разделяйте:

• div — для стилей и разметки
• section — для логических частей контента

Ошибка 3 — слишком много section

Иногда section ставят вокруг каждого блока подряд:

<section>
  <h2>Заголовок 1</h2>
</section>

<section>
  <h2>Заголовок 2</h2>
</section>

<section>
  <h2>Заголовок 3</h2>
</section>

Формально это не запрещено, но если эти блоки все относятся к одной теме, их лучше объединить:

<section>
  <h2>Вопросы и ответы</h2>

  <h3>Вопрос 1</h3>
  <p>Ответ...</p>

  <h3>Вопрос 2</h3>
  <p>Ответ...</p>
</section>

Здесь у вас один логический раздел «Вопросы и ответы» вместо множества несвязанных разрозненных section.

Ошибка 4 — использование section вместо article

Например, список новостей:

<section>
  <h2>Новости</h2>

  <section>
    <h3>Запуск новой версии</h3>
    <p>Мы обновили платформу.</p>
  </section>
</section>

Каждая новость — самостоятельный материал, и ее логичнее сделать article:

<section>
  <h2>Новости</h2>

  <article>
    <h3>Запуск новой версии</h3>
    <p>Мы обновили платформу.</p>
  </article>

  <article>
    <h3>Новый тариф</h3>
    <p>Мы добавили тариф для малого бизнеса.</p>
  </article>
</section>

Рекомендации и хорошие практики

Как себе задавать вопрос перед использованием section

Перед тем как обернуть блок в section, задайте себе три вопроса:

1. Могу ли я дать этому блоку понятный заголовок?
2. Объединены ли элементы внутри одной темой?
3. Этот раздел помогает понять структуру документа?

Если на все три вопроса ответ «да», section, скорее всего, уместен.

Мини-чеклист по section

Давайте соберем краткий чеклист:

• у каждого section есть заголовок
• section не используется как замена div для стилизации
• section обозначает логический раздел страницы или статьи
• нет избыточной вложенности section без причин
• для независимых материалов используется article, а не section

Комбинирование section с другими семантическими тегами

Хорошая структура страницы может выглядеть так:

<body>
  <header>
    <!-- Шапка -->
  </header>

  <main>
    <article>
      <header>
        <h1>Название статьи</h1>
      </header>

      <section>
        <h2>Введение</h2>
        <p>Краткое описание темы.</p>
      </section>

      <section>
        <h2>Основные понятия</h2>
        <p>Подробное объяснение.</p>
      </section>

      <footer>
        <p>Автор статьи</p>
      </footer>
    </article>

    <aside>
      <!-- Боковая панель с дополнительной информацией -->
    </aside>
  </main>

  <footer>
    <!-- Подвал сайта -->
  </footer>
</body>

Здесь каждый тег выполняет свою роль, а section участвует именно там, где нужны тематические разделы.

Семантическая разметка в таком виде облегчает поддержку проекта, работу над SEO и улучшает доступность.

Частозадаваемые технические вопросы по теме section

Как правильно пронумеровать id у нескольких section на странице

Если вы добавляете id для якорных ссылок, делайте их осмысленными, а не просто section1, section2. Например:

<section id="about">
  <h2>О нас</h2>
</section>

<section id="services">
  <h2>Услуги</h2>
</section>

Так проще создавать читаемые ссылки вида /page#services и поддерживать код.

Можно ли использовать несколько section с одинаковым id

Нельзя. Атрибут id должен быть уникальным в пределах документа. Если нужно объединить несколько разделов по категории, используйте класс:

<section class="chapter">
  <h2>Глава 1</h2>
</section>

<section class="chapter">
  <h2>Глава 2</h2>
</section>

id оставляйте только для уникальных якорей и селекторов.

Как сделать отступы между несколькими section без лишних оберток

Используйте селектор по тегу или классу:

/* Отступы между всеми section в main */
main > section {
  margin-block: 40px;
}

Если нужны разные отступы — добавляйте модификаторы:

<section class="section section--large">...</section>
<section class="section section--small">...</section>

Можно ли делать section внутри form или наоборот

Да, оба варианта допустимы. Если форма большая и логически разделена на шаги, можно оформлять шаги как section внутри form:

<form>
  <section>
    <h2>Личные данные</h2>
    <!-- Поля -->
  </section>

  <section>
    <h2>Адрес</h2>
    <!-- Поля -->
  </section>
</form>

Так форма становится понятнее и пользователям, и скринридерам.

Как использовать section в одностраничных приложениях SPA

В SPA структура DOM часто меняется динамически, но принципы те же. Внутри корневого контейнера приложения все равно стоит использовать семантические теги:

<div id="app">
  <main>
    <section data-route="home">
      <h1>Главная</h1>
    </section>

    <section data-route="profile">
      <h1>Профиль</h1>
    </section>
  </main>
</div>

Роутер может показывать или скрывать нужные section, но разметка при этом остается семантически корректной.