Исполняемые доки HTML: Тег section

Тег section в HTML: section, article или div

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

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Для чего нужен тег section

<section> группирует содержимое на одну тему и начинается с заголовка, который эту тему называет. Лендинг, разделенный на «Features», «Pricing» и «FAQ», это хрестоматийный пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Каждый раздел это глава страницы, а каждый заголовок это строка в оглавлении страницы. Как и у других семантических тегов, у <section> нет стилей по умолчанию; рамки задает CSS.

section, article или div

На экране все три выглядят одинаково. Различается то, что они говорят о содержимом:

Элемент	Означает	Проверка
`<article>`	Законченный самостоятельный фрагмент	Имел бы он смысл, если опубликовать его отдельно, на другом сайте или в ленте?
`<section>`	Тематическая часть большего целого	Есть ли у него заголовок (или нужен ли он), и является ли он одной главой чего-то?
`<div>`	Ничего: блок для стилей или раскладки	Нужен ли он только для CSS или JavaScript?

Записи блога, комментарии на форуме, новости и карточки товаров это статьи. «Features», «Глава 2» и «Похожие товары» это разделы. Flex-строка, выстраивающая три карточки в ряд, это div.

Статьи внутри раздела

Они вкладываются в обе стороны. Здесь раздел «Latest posts» содержит несколько независимых статей:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Обратите внимание на <div class="grid">: он нужен только для того, чтобы выстроить карточки в ряд, поэтому div здесь правильный тег. Каждая карточка это article, потому что каждая запись самостоятельна.

Разделы внутри статьи

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

Синий блок это статья (все руководство), зеленые полосы это ее разделы. Давайте разделу собственный уровень заголовка: в статье с h2 разделы с h3.

Названные разделы становятся ориентирами

Программы чтения с экрана перечисляют некоторые элементы как ориентиры, между которыми пользователи могут переходить. <section> становится ориентиром region, только когда у него есть доступное имя. Направьте aria-labelledby на его заголовок:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Делайте так для нескольких разделов, к которым пользователь захочет переходить напрямую, а не для каждого: страница с двадцатью ориентирами так же трудна для просмотра, как страница без них. Разделы без имени все равно полезны, потому что их заголовки попадают в список заголовков программы чтения с экрана.

Разделы также хорошо подходят как цели для ссылок внутри страницы. Дайте разделу id, и ссылка с href="#id" перейдет к нему:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Частые ошибки

<section> как обертка для стилей. Если нет заголовка и темы, используйте <div>. Где уместен каждый тег разметки, показано на странице семантическая верстка.
Одна запись блога в <section>. Самостоятельная запись это <article>.
Разделы без заголовков. Добавьте заголовок, пусть даже визуально скрытый, или подумайте, раздел ли это вообще.
<section> вместо <main>. Основное содержимое страницы идет в <main>; разделы находятся внутри него.
Имя у каждого раздела. Добавляйте aria-labelledby только важным разделам, чтобы список ориентиров оставался коротким.

Часто задаваемые вопросы

Что такое тег section в HTML?

<section> группирует содержимое, относящееся к одной теме, например главу документа или часть «Цены» на лендинге. Обычно он должен начинаться с заголовка, который говорит, о чем раздел.

Чем section отличается от div?

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

Чем section отличается от article?

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

Может ли article содержать section, а section содержать article?

Да, и то, и другое. Длинную статью можно разбить на разделы, а раздел вроде «Последние записи» может содержать список статей.

Нужен ли section заголовок?

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

Связанные концепции