Тег main в HTML - как правильно выделять основное содержимое страницы

Главная

База знаний

html

Семантические элементы

Тег main в HTML - подробное руководство по использованию

26 ноября 2025

Автор

Олег Марков

Введение

Тег main в HTML появился не просто так. Он решает важную задачу — явно выделяет основное содержимое страницы среди шапки, подвала, меню и повторяющихся блоков.

Смотрите, идея очень простая: когда вы помечаете главный контент страницы с помощью main, вы помогаете:

пользователям с экранными читателями быстрее попадать к нужному контенту;
поисковым системам лучше понимать структуру страницы;
себе и команде — проще поддерживать и развивать проект.

Давайте разберемся, когда и как использовать main, какие у тега ограничения, как он влияет на доступность и как его правильно комбинировать с другими семантическими блоками.

Что такое тег main и зачем он нужен

Семантическая роль тега main

Тег main — это семантический контейнер, который обозначает основное уникальное содержимое страницы. То есть то, ради чего эта страница существует.

Например:

на странице статьи — текст статьи, комментарии, связанные материалы;
в интернет-магазине — список товаров или карточка конкретного товара;
в админке — рабочая область с таблицами, формами, графиками;
на лендинге — основной контент, который описывает продукт или услугу.

Важно понимать: main не заменяет body, не является обязательным, но значительно улучшает читаемость структуры разметки и доступность.

Основные правила по спецификации

Ключевые моменты, на которые стоит опираться:

На странице должен быть не более одного элемента main.
main не должен находиться внутри:
- header
- footer
- article
- aside
- nav
- и других похожих “контейнеров контента”.
main должен содержать контент, уникальный для этой страницы:
- не шапка;
- не подвал;
- не боковое меню;
- не логотип и т. д.

По сути, если вы уберете все повторяющиеся между страницами блоки, то оставшееся — кандидат на main.

Базовый синтаксис и простейший пример

Минимальный пример использования main

Смотрите, я покажу вам самый простой каркас страницы с использованием main:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Страница статьи</title>
</head>
<body>
  <header>
    <!-- Шапка сайта -->
    <h1>Мой блог</h1>
    <!-- Главное меню -->
    <nav>
      <a href="/">Главная</a>
      <a href="/articles">Статьи</a>
    </nav>
  </header>

  <main>
    <!-- Основное уникальное содержимое страницы -->
    <article>
      <h2>Тег main в HTML</h2>
      <p>Здесь размещен текст статьи.</p>
    </article>
  </main>

  <footer>
    <!-- Подвал сайта -->
    <p>© 2025 Мой блог</p>
  </footer>
</body>
</html>

Комментарии в примере подсказывают, какую часть страницы можно считать “общей” (header, footer, nav) и какую — основной (main).

Как main помогает с доступностью (a11y)

Как экранные читатели используют main

Экранные читатели (например, NVDA, JAWS, VoiceOver) позволяют пользователю переходить по “ландмаркам” — важным областям страницы. main как раз является такой областью.

Когда на странице есть main:

пользователь может нажать специальную комбинацию клавиш, чтобы сразу перейти к основному содержанию;
ему не нужно многократно “прослушивать” шапку и меню на каждой странице.

Например, JAWS показывает список областей:

banner (обычно header)
navigation (nav)
main (наш основной контент)
contentinfo (footer)

Для пользователя это способ быстро ориентироваться в структуре сайта.

ARIA-роль main и когда она нужна

Исторически, до появления тега main, использовали ARIA-роль main:

<div role="main">
  <!-- Основной контент страницы -->
</div>

Сейчас, в современных браузерах, тег main сам по себе имеет семантику “main landmark”, поэтому дополнительная роль не нужна.

Но иногда вы можете столкнуться с легаси-кодом, где применяют оба варианта. Покажу, как стоит делать сегодня:

<main>
  <!-- Современный корректный вариант -->
</main>

Использовать одновременно main и role="main" не требуется, это просто дублирование семантики.

Где размещать main на странице

Пример с боковой колонкой

Давайте разберемся на примере страницы блога с сайдбаром:

<body>
  <header>
    <!-- Верхнее меню и логотип -->
  </header>

  <div class="layout">
    <main>
      <!-- Основная статья -->
      <article>
        <h1>Тег main в HTML</h1>
        <p>Текст статьи...</p>
      </article>
    </main>

    <aside>
      <!-- Боковая колонка с дополнительной информацией -->
      <section>
        <h2>Популярные статьи</h2>
        <ul>
          <li><a href="/post-1">Статья 1</a></li>
          <li><a href="/post-2">Статья 2</a></li>
        </ul>
      </section>
    </aside>
  </div>

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

Здесь:

main — про текущую статью;
aside — про доп. навигацию и второстепенный контент.

Что можно и что нельзя вкладывать в main

Корректное содержимое main

В main вы можете размещать любые секционные элементы и контент:

article — статьи, новости, посты, карточки;
section — логические разделы;
div — обычные блоки;
h1–h6 — заголовки;
form — формы, если они часть основного сценария страницы;
таблицы, списки, изображения и т. д.

Пример страницы интернет-магазина:

<main>
  <!-- Хлебные крошки как часть основного контента карточки товара -->
  <nav aria-label="Вы находитесь здесь">
    <!-- Здесь мы показываем путь к текущей странице -->
    <ol>
      <li><a href="/">Главная</a></li>
      <li><a href="/catalog">Каталог</a></li>
      <li>Ноутбуки</li>
    </ol>
  </nav>

  <article>
    <!-- Карточка товара -->
    <h1>Ноутбук XYZ</h1>
    <p>Описание товара...</p>
    <button>Добавить в корзину</button>
  </article>
</main>

Что не стоит помещать в main

Желательно избегать в main:

глобального меню сайта;
логотипа, который повторяется везде;
подвала и глобальных ссылок;
информации, которая одинакова на всех страницах (предупреждения, баннеры и т. п.), если они не имеют отношения к уникальному содержимому.

Можно ли использовать несколько main на одной странице

Требование спецификации

По спецификации HTML:

на странице рекомендуется использовать только один элемент main;
элемент main не должен появляться внутри article, aside, footer, header, nav.

Причина в том, что main — это “основная область документа”, а не просто важный блок.

Что будет, если main несколько

Браузер страницу не “сломает”, но:

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

Поэтому схема “одна страница — один main” — не просто рекомендация, а практическая норма.

Совместимость с браузерами и старый код

Поддержка браузеров

На момент последних изменений спецификации:

все современные браузеры (Chrome, Firefox, Safari, Edge, мобильные версии) поддерживают тег main как блочный элемент и учитывают его семантику;
для старых браузеров типа IE 9 и ниже раньше использовали “хаки”, чтобы тег вел себя как блок.

Если вы работаете со старыми проектами, можно встретить такой код:

<!-- Поддержка HTML5-тегов в старых IE -->
<!--[if lt IE 9]>
<script>
  // Здесь мы регистрируем новые теги HTML5,
  // чтобы старый браузер правильно их отображал
  document.createElement('main');
</script>
<![endif]-->

Сейчас подобные конструкции актуальны только в очень старых проектах.

main и старые ARIA-практики

До появления main разработчики использовали:

<div id="content" role="main">
  <!-- Основной контент страницы -->
</div>

Сегодня рекомендуемый путь:

использовать main;
не добавлять атрибут role="main", если вы уже используете сам тег.

Взаимодействие main с другими семантическими тегами

main и header

Частый вопрос: “Можно ли вкладывать header внутрь main?”

Ответ зависит от смысла:

глобальный header сайта (логотип, основное меню, поиск) должен быть снаружи main;
локальный header раздела или статьи (заголовок материала, локальная навигация по разделу) можно разместить внутри main.

Пример:

<body>
  <header>
    <!-- Глобальная шапка сайта -->
    <h1>Интернет-магазин</h1>
  </header>

  <main>
    <header>
      <!-- Локальный заголовок раздела каталога -->
      <h2>Ноутбуки</h2>
      <!-- Фильтры по товарам -->
      <form>
        <!-- Здесь мы размещаем фильтры каталога -->
      </form>
    </header>

    <!-- Список товаров -->
    <section>
      <h3>Популярные модели</h3>
      <!-- Карточки товара -->
    </section>
  </main>
</body>

Здесь два header:

один — глобальный (снаружи main);
другой — локальный, относящийся к содержимому main.

main и article

article предназначен для автономных фрагментов контента: постов, новостей, карточек.

Связка main + article:

main содержит “основной контент страницы”;
article — автономную единицу внутри него.

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

<main>
  <h1>Новости компании</h1>

  <!-- Каждая новость как отдельная статья -->
  <article>
    <h2>Открытие нового офиса</h2>
    <p>Текст новости...</p>
  </article>

  <article>
    <h2>Обновление продукта</h2>
    <p>Текст новости...</p>
  </article>
</main>

main и section

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

Пример лендинга:

<main>
  <!-- Первый экран -->
  <section>
    <h1>Сервис аналитики X</h1>
    <p>Краткое описание сервиса.</p>
    <button>Попробовать бесплатно</button>
  </section>

  <!-- Блок с преимуществами -->
  <section>
    <h2>Преимущества сервиса</h2>
    <ul>
      <li>Скорость анализа данных</li>
      <li>Удобные отчеты</li>
      <li>Интеграция с другими системами</li>
    </ul>
  </section>

  <!-- Блок с отзывами -->
  <section>
    <h2>Отзывы клиентов</h2>
    <article>
      <h3>Компания ABC</h3>
      <p>Отзыв клиента...</p>
    </article>
  </section>
</main>

main и SEO

Влияет ли main на ранжирование

Сам по себе тег main не дает “плюс к позициям”. Поисковые системы не поднимают сайт выше только из-за его использования.

Но main:

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

То есть это не “магический тег для SEO”, а элемент, который вписывается в общую картину грамотной семантической разметки.

Связь с заголовками и структурой документа

Рекомендуется:

разместить основной заголовок страницы (часто h1) внутри main;
не разбрасывать ключевой текст по разным несвязанным областям вне main.

Пример:

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

  <main>
    <!-- Здесь главный заголовок данной страницы -->
    <h1>Курс по JavaScript для начинающих</h1>
    <p>Описание курса, программы, стоимости и т. д.</p>
  </main>

  <footer>
    <!-- Контакты и другая техническая информация -->
  </footer>
</body>

Так поисковику легче однозначно связать заголовок и основной контент.

main в SPA и компонентах (React, Vue и др.)

main в одностраничных приложениях

В SPA (React, Vue, Angular) обычно:

main располагается в корневом шаблоне;
содержимое меняется в зависимости от текущего маршрута.

Пример на React:

function App() {
  return (
    <div className="app">
      {/* Глобальная шапка */}
      <Header />

      {/* Основная область приложения */}
      <main>
        {/* Здесь мы выводим текущую страницу */}
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/profile" element={<ProfilePage />} />
        </Routes>
      </main>

      {/* Глобальный подвал */}
      <Footer />
    </div>
  );
}

Комментарии показывают, как main встраивается в каркас приложения. Вы по-прежнему используете один main на всю страницу, а внутри него уже “переключаете” экраны.

main внутри компонентов

В компонентах:

не стоит создавать собственные main;
лучше использовать div, section, article и т. п.

Почему? Потому что компонент может быть вставлен в разные места, а main по смыслу должен быть только один и на самом верхнем уровне структуры страницы.

Частые ошибки при использовании main

main внутри header или footer

Пример некорректного кода:

<header>
  <!-- Так делать не следует -->
  <main>
    <h1>Заголовок страницы</h1>
  </main>
</header>

Проблема в том, что:

main должен быть на одном уровне с header, а не внутри него;
header — это отдельная область (landmark), и вкладывать в нее еще одну основную область не стоит.

Исправленный вариант:

<body>
  <header>
    <h1>Название сайта</h1>
  </header>

  <main>
    <h2>Заголовок конкретной страницы</h2>
    <p>Основной контент...</p>
  </main>
</body>

Использование main для бокового меню

Еще одна ошибка — использовать main как контейнер для сайдбара или навигации:

<!-- Плохой пример -->
<main>
  <nav>
    <!-- Боковое меню -->
  </nav>
</main>

Навигация — это не основной контент, а вспомогательная часть интерфейса, поэтому логичнее:

<body>
  <header>
    <!-- Верхнее меню -->
  </header>

  <div class="layout">
    <nav>
      <!-- Боковое меню -->
    </nav>

    <main>
      <!-- Контент страницы -->
    </main>
  </div>
</body>

Практический пример: страница документации

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Документация по API</title>
</head>
<body>
  <header>
    <!-- Логотип и глобальное меню -->
    <div class="logo">API Docs</div>
    <nav aria-label="Основное меню">
      <!-- Здесь главное меню по разделам документации -->
      <a href="/getting-started">Начало работы</a>
      <a href="/reference">Справочник</a>
      <a href="/guides">Руководства</a>
    </nav>
  </header>

  <div class="layout">
    <nav aria-label="Навигация по разделу">
      <!-- Боковое меню текущего раздела -->
      <ul>
        <li><a href="#intro">Введение</a></li>
        <li><a href="#auth">Аутентификация</a></li>
        <li><a href="#errors">Ошибки</a></li>
      </ul>
    </nav>

    <main>
      <!-- Основная область с текстом документации -->
      <article>
        <header>
          <!-- Заголовок текущей страницы документации -->
          <h1 id="intro">Введение в API</h1>
          <p>Краткое описание возможностей API.</p>
        </header>

        <section id="auth">
          <h2>Аутентификация</h2>
          <p>Описание процесса авторизации.</p>
        </section>

        <section id="errors">
          <h2>Обработка ошибок</h2>
          <p>Список возможных кодов ошибок и их значения.</p>
        </section>
      </article>
    </main>
  </div>

  <footer>
    <!-- Подвал с юридической информацией -->
    <p>© 2025 Компания X</p>
  </footer>
</body>
</html>

Здесь вы видите:

один main;
несколько nav (глобальное меню и локальное меню раздела);
article и section внутри main для логической структуризации текста.

Выводы и краткие рекомендации

Тег main в HTML — это простой по синтаксису, но важный по смыслу элемент. Он:

явно помечает основное содержимое страницы;
помогает технологиям доступности быстро перенаправить пользователя к нужному контенту;
упорядочивает структуру документа;
вписывается в общую семантическую модель HTML вместе с header, footer, nav, article и section.

Если кратко по практическим правилам:

Используйте один main на страницу.
Размещайте main внутри body, на одном уровне с header и footer.
Старайтесь, чтобы main содержал уникальный контент страницы.
Не вкладывайте main в header, footer, nav, article и aside.
Не используйте main для глобальной навигации, шапки или подвала.
В SPA размещайте main в корневом шаблоне, а не в отдельных компонентах.

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

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

Можно ли использовать тег main внутри dialog или модального окна

Технически спецификация не рекомендует вкладывать main внутрь других секционных областей. Для модальных окон лучше использовать div или section с правильными ARIA-атрибутами role="dialog" и aria-modal="true". Помещать туда еще один main не нужно — основной main уже есть на странице.

Как сделать “переход к основному содержимому” с помощью ссылки

Обычно добавляют скрытую ссылку в начале страницы:

<a href="#main-content" class="skip-link">Перейти к основному содержимому</a>

<header>...</header>

<main id="main-content">
  <!-- Основной контент -->
</main>

Класс skip-link делают видимым только при фокусе с клавиатуры. Так пользователи экранных читателей и те, кто пользуется клавиатурой, могут быстро перейти к содержимому main.

Нужен ли main на страницах 404 или страницах ошибок

Да, если на странице есть хоть какой-то основной текст (описание ошибки, ссылки на другие разделы), его стоит обернуть в main. Даже страницы ошибок воспринимаются как полноценные страницы, и пользователям с экранными читателями будет проще ориентироваться.

Можно ли стилизовать main как угодно или есть ограничения

С точки зрения CSS main — обычный блочный элемент. Вы можете:

делать его flex-контейнером;
задавать grid-сетку;
управлять отступами, цветом фона и т. д. Ограничений на стили нет, важно только не ломать логическую структуру: не превращайте main в “обертку для всего подряд”.

Как обозначить несколько логических “главных зон” на дашборде если main один

Используйте внутри main комбинацию section и article. Например:

<main>
  <section>
    <h1>Общий обзор</h1>
    <!-- Виджеты с основными метриками -->
  </section>
  <section>
    <h2>Детальная статистика</h2>
    <!-- Таблицы, графики -->
  </section>
</main>

Так вы соблюдаете правило “один main”, но при этом можете разбить интерфейс дашборда на несколько важных зон с собственными заголовками.