Тег <​section​> в HTML: как разбить страницу на смысловые блоки
2026-02-21 19:41 Diff
https://skillbox.ru/media/code/teg-section-v-html-kak-razbit-stranicu-na-smyslovye-bloki/

#статьи

  • 29 июл 2025
  • 0

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

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

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

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

Содержание

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

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

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

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

<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>). Внутри обычно находится заголовок (<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>. Давайте разберёмся, в чём между ними разница.

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

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

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

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

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

<section aria-label="Отзывы клиентов"> <!-- Содержимое блока без визуального заголовка --> </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; /* Увеличенный размер текста */ }

Результат

Результат работы кода в браузере
Скриншот: Google Chrome / Skillbox Media
  • В самом начале работы над страницей мысленно размечайте документ на смысловые блоки: это поможет определить, какие семантические теги лучше использовать, подходит ли тут <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; }
  • Используйте <section> вместе с другими семантическими тегами — например, <aside> или <article>.
Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше