29 июл 2025
0

Тег <section> в HTML: как разбить страницу на смысловые блоки

Разбираемся, что такое <section>, когда его стоит использовать, чем он отличается от других тегов и как его правильно применять в проектах.

Иллюстрация: Polina Vari для Skillbox Media

Редакция «Код» Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Тег <section> помогает разбивать HTML-документ на отдельные тематические части: новости, услуги, контакты, отзывы. Благодаря ему пользователи и поисковые системы лучше ориентируются на странице, а самим разработчикам становится проще читать код. В статье поговорим о том, где и когда применять этот тег.

Содержание

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

Что такое тег <section> и зачем он нужен

Этот тег используют, если на странице есть несколько разных тематических блоков:

описание проекта;
список услуг;
раздел с отзывами;
контактная информация.

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

Пример разметки:

<header>Шапка сайта</header>

<main>
  <section>
    <h2>Описание проекта</h2>
    <p>Этот проект создан для того, чтобы...</p>
  </section>

  <section>
    <h2>Технические характеристики</h2>
    <ul>
      <li>Скорость загрузки: 1,2 сек</li>
      <li>Поддержка всех браузеров</li>
    </ul>
  </section>
</main>

<footer>Подвал</footer>

Важно: внутри <section> должен быть заголовок — <h2>, <h3> и так далее. Даже если он не отображается на странице, он должен быть в коде, иначе теряется смысловая структура.

Синтаксис и атрибуты тега <section>

Тег <section> — парный, то есть его нужно открыть (<section>) и потом закрыть (</section>). Внутри обычно находится заголовок (<h1> — <h6>) и основной контент.

<section>
  <h2>Важное о нашем ЖК</h2>
  <p>Мы всегда заботимся о том, чтобы жителям нашего ЖК было комфортно.</p>
</section>

В браузере это отобразится как обычный блок с текстом и заголовком.

Результат работы кода в браузере
*Скриншот: Google Chrome / Skillbox Media*

Какие атрибуты можно использовать

Тег <section> поддерживает все стандартные глобальные атрибуты HTML. С их помощью можно задать стили, улучшить доступность и управлять отображением. Давайте рассмотрим пример использования атрибутов:

<section id="product-description" class="highlight" aria-label="Описание товара">
  <h2>Описание товара</h2>
  <p>Этот товар идеально подходит для начинающих и опытных пользователей.</p>
</section>

Что здесь происходит:

id="product-description" задаёт уникальный идентификатор, по которому можно создать якорную ссылку. Это удобно, если вы хотите, чтобы по нажатию на пункт меню или на кнопку страница прокручивалась к нужному разделу.
class="highlight" задаёт имя класса для стилизации через CSS.
aria-label="Описание товара" добавляет невидимый альтернативный заголовок для скринридеров, если визуального заголовка нет или он недостаточно информативен.

Чем <section> отличается от <div>, <article>, <main>

Иногда непонятно, какой тег использовать: <section>, <div>, <article> или <main>. Давайте разберёмся, в чём между ними разница.

<div> — просто контейнер без смысла. Он не говорит браузеру, что внутри. Обычно нужен, чтобы сгруппировать элементы и задать им стили. Это может быть обёртка для карточки товара или сетки.
<article> — самостоятельный блок. Его можно скопировать и вставить в другую страницу, и он всё равно будет понятен. Подходит для новостей, постов, отзывов, рецептов, описаний товаров.
<main> — основная часть страницы. Всё, ради чего пользователь сюда пришёл. На странице он должен быть только один, и обычно внутри него уже размещают <section>, <article> и другие части.
<section> — смысловой блок внутри страницы. Он объединяет контент по теме. У такой секции обязательно должен быть заголовок, чтобы было понятно, о чём она.

Простой тест: можете ли вы придумать заголовок для блока? Если да, возможно, нужен <section>. Если нет, скорее всего, <div> подойдёт лучше.

Как <section> влияет на доступность и навигацию

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

Когда внутри каждой секции есть заголовок (<h2>, <h3> и так далее), это упрощает навигацию. Скринридеры могут быстро распознать структуру страницы и дать пользователю возможность перейти к нужному разделу — как по оглавлению.

Если заголовок по каким-то причинам не нужен на экране, можно скрыть его или добавить описание с помощью атрибута aria-label. Это даёт скринридерам контекст, даже если пользователь не видит заголовок. Пример:

<section aria-label="Отзывы клиентов">
  <!-- Содержимое блока без визуального заголовка -->
</section>

Как стилизуется тег <section>

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

Ниже пример страницы, в которой каждая секция оформлена по-своему:

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Пример разметки с section</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<h1 class="visually-hidden">Страница сервиса услуг</h1>
  <section class="main-section">
    <h2>Ознакомьтесь с подробной информацией</h2>
    <p>Это основная информация о нашем сервисе.</p>
  </section>

  <section class="features-section">
    <h2>Наши преимущества</h2>
    <ul>
      <li>Бесплатная доставка</li>
      <li>Гарантия качества</li>
      <li>Поддержка 24/7</li>
    </ul>
  </section>

  <section class="contact-section">
    <h2>Свяжитесь с нами</h2>
    <p>Пишите нам на почту: hello@example.com</p>
  </section>

  <section class="reviews-section">
    <h2>Отзывы клиентов</h2>
    <blockquote>«Отличный сервис! Рекомендую всем!»</blockquote>
  </section>
</main>
</body>
</html>

CSS

/* === Базовые стили для body (тела страницы) === */
body {
  font-family: "Arial", sans-serif; /* Шрифт для всей страницы */
  line-height: 1.6; /* Увеличенный межстрочный интервал для лучшей читаемости */
  background-color: #f9f9f9; /* Светло-серый фон страницы */
  color: #333; /* Основной цвет текста — тёмно-серый */
}

/* === Стиль для визуально скрытого заголовка <h1> === */
.visually-hidden {
  position: absolute; /* Выводим за пределы потока документа */
  width: 1px; /* Обнуляем видимые размеры */
  height: 1px;
  margin: -1px; /* Отрицательный отступ, чтобы элемент точно не влиял на разметку */
  padding: 0;
  overflow: hidden; /* Прячем содержимое */
  clip: rect(0 0 0 0); /* Рекомендуемый способ скрытия для скринридеров */
  white-space: nowrap; /* Предотвращаем перенос текста */
  border: 0; /* Убираем возможные рамки */
}

/* === Основной контейнер <main> — центральная часть сайта === */
main {
  max-width: 1000px; /* Ограничиваем ширину основного контента */
  margin: 0 auto; /* Центрируем по горизонтали */
  padding: 20px; /* Внутренние отступы слева и справа */
}

/* === Общие стили для всех секций (<section>) === */
section {
  padding: 40px 20px; /* Вертикальные отступы внутри секции */
  margin-bottom: 20px; /* Отступ снизу между секциями */
  border-radius: 8px; /* Скруглённые углы */
  text-align: center; /* Текст по центру */
  color: #fff; /* Цвет текста — белый */
}

/* === Стили для первой секции === */
.main-section {
  background-color: #4a90e2; /* Ярко-синий фон */
}

/* === Стили для второй секции === */
.features-section {
  background-color: #66c070; /* Зелёный фон */
}

/* === Стили для третьей секции === */
.contact-section {
  background-color: #f7931e; /* Оранжевый фон */
}

/* === Стили для четвёртой секции === */
.reviews-section {
  background-color: #9b59b6; /* Фиолетовый фон */
}

/* === Заголовки внутри секций (<h2>) === */
section h2 {
  font-size: 2em; /* Увеличенный размер шрифта для заголовков */
  margin-bottom: 10px; /* Небольшой отступ снизу под заголовком */
}

/* === Список преимуществ (<ul>) === */
section ul {
  list-style: none; /* Убираем маркеры списка */
  padding: 0; /* Убираем внутренний отступ слева */
  display: inline-block; /* Делаем список инлайновым для центровки */
  text-align: left; /* Выравниваем пункты списка по левому краю */
}

/* === Пункты списка (<li>) === */
section li {
  margin: 8px 0; /* Вертикальные отступы между пунктами */
  font-size: 1.2em; /* Чуть увеличенный размер шрифта */
}

/* === Цитаты в отзывах (<blockquote>) === */
section blockquote {
  font-style: italic; /* Курсив для цитат */
  background: rgba(255, 255, 255, 0.2); /* Полупрозрачный фон */
  padding: 15px 25px; /* Внутренние отступы */
  border-left: 4px solid #fff; /* Левая полоска для акцента */
  display: inline-block; /* Чтобы блок занимал только нужное пространство */
  max-width: 600px; /* Ограничиваем ширину цитаты */
  font-size: 1.2em; /* Увеличенный размер текста */
}

Результат

Полезные советы и лайфхаки

В самом начале работы над страницей мысленно размечайте документ на смысловые блоки: это поможет определить, какие семантические теги лучше использовать, подходит ли тут <section> или нужно что-то другое.
Определяйте для себя основную мысль секции: так будет легче понять, где начинается и заканчивается раздел, а также задать осмысленные имена CSS-классам внутри него.
Используйте явные или скрытые заголовки внутри тега <section>: это поможет определить, нужен ли здесь вообще <section>, а также позволит выстроить понятную структуру страницы в целом.
Если в <section> нет явного визуального заголовка, добавляйте скрытый. Чтобы не показывать заголовок на странице, можно использовать универсальный класс .visually-hidden. Пользователи такой текст не увидят, но поисковые системы и скринридеры смогут его прочитать.

HTML

<h1 class="visually-hidden">Руководство пользователя</h1>

CSS

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}