Тег <main> определяет основное содержимое веб-страницы, то есть тот раздел, который напрямую связан с её основной темой. Этот элемент появился в спецификации HTML5 и предназначен для улучшения семантической структуры документа. В отличие от <div>, он сообщает браузерам и вспомогательным технологиям, где находится главный контент, исключая повторяющиеся блоки вроде меню, подвала и боковых панелей.
В документе должен присутствовать только один <main>, и его нельзя помещать внутрь элементов <article>, <aside>, <footer>, <header> или <nav>. Такое ограничение делает структуру страницы предсказуемой для поисковых систем и скринридеров, что повышает доступность ресурса. Например, при навигации с помощью клавиатуры пользователь может сразу перейти к основному разделу, пропустив навигацию и рекламу.
Использование <main> особенно важно при создании шаблонов для CMS и SPA-приложений. Он помогает разделять контентные зоны и упрощает поддержку кода. Размещение в нём ключевых статей, форм или динамических компонентов улучшает индексирование страниц и ускоряет работу интерфейсов, где обновляется только содержимое внутри этого тега.
Назначение тега <main> в структуре HTML-документа
Тег <main> предназначен для обозначения основного содержимого страницы, уникального для конкретного документа. Он используется один раз и охватывает контент, напрямую связанный с целью страницы, исключая элементы, повторяющиеся на всех страницах сайта, такие как меню, подвал или боковые панели.
Браузеры и вспомогательные технологии используют <main> для быстрого перехода к основному разделу, что повышает удобство навигации и доступность. Например, экранные дикторы могут сразу перемещаться к содержимому внутри <main>, минуя навигационные блоки.
Тег располагается внутри <body> и не должен находиться внутри <article>, <aside>, <footer>, <header> или <nav>. Правильное размещение улучшает семантическую структуру документа и помогает поисковым системам корректно интерпретировать ключевой контент страницы.
Рекомендуется использовать <main> для основного текста статьи, каталога товаров, контента блога или других элементов, отражающих основную тему страницы.
Когда тег <main> обязателен, а когда его можно опустить
Тег <main> обязателен, если на странице есть уникальный основной контент, не повторяющийся на других страницах и не относящийся к элементам интерфейса – навигации, шапке или подвалу. Он помогает поисковым системам и вспомогательным технологиям точно определить центральную часть документа.
- Обязателен на страницах со структурой: шапка, меню, основной текст, подвал. Пример – статья, карточка товара, страница профиля.
- Используется только один раз на странице. Несколько <main> недопустимы.
- Не должен находиться внутри <article>, <aside>, <footer>, <header> или <nav>.
Тег можно опустить, если:
- Страница служебная и не содержит основного содержимого (например, страница ошибки 404 или окно авторизации).
- Веб-приложение построено на динамической загрузке контента, где область меняется без полной перезагрузки страницы, а структура управляется фреймворком.
- Весь контент представляет собой один логический компонент, не требующий выделения основной области, например, медиа-плеер на всю страницу.
Отсутствие <main> в документе с богатой структурой снижает семантическую точность и усложняет работу экранных дикторов. При проектировании шаблонов следует включать тег по умолчанию и удалять его только при очевидном отсутствии основного содержимого.
Различие между <main>, <section> и <article>
Тег <main> предназначен для основного содержимого страницы. В нём размещается информация, непосредственно связанная с целью страницы. В документе допускается только один элемент <main>, и он не должен включать шапку, подвал или боковые панели.
<section> используется для смысловых блоков внутри основной области или других разделов. Он подходит для группировки связанных по теме элементов: подзаголовков, абзацев, списков. Каждый <section> желательно сопровождать заголовком (<h2>–<h6>), чтобы обозначить тему блока.
<article> применяют для автономных материалов, которые можно использовать отдельно: публикации блога, новости, карточка товара, комментарий. В отличие от <section>, содержимое <article> должно быть самодостаточным и иметь собственный контекст.
Практическое различие: <main> охватывает всю основную часть страницы, <section> делит её на смысловые разделы, а <article> выделяет законченные единицы контента, пригодные для повторного использования вне страницы.
Использование <main> для улучшения доступности сайта
Тег <main> помогает пользователям экранных читалок быстро переходить к основному содержимому страницы, минуя повторяющиеся элементы вроде меню и шапки. Он должен содержать уникальный контент, относящийся только к текущей странице, без элементов навигации, боковых панелей или футера.
Использование <main> особенно важно для доступности, так как многие ассистивные технологии предоставляют сочетания клавиш для мгновенного перехода к основному разделу. Это ускоряет взаимодействие и уменьшает количество ненужных действий при навигации.
Основные рекомендации по применению:
| Правило | Описание |
|---|---|
| Один тег <main> на страницу | Помогает скринридерам точно определить границы основного контента. |
| Размещение внутри <body> | Тег должен находиться непосредственно внутри тела документа, а не внутри других семантических контейнеров. |
| Отсутствие повторяющегося контента | Внутри <main> не должно быть элементов, присутствующих на всех страницах сайта. |
| Совместное использование с ARIA-атрибутами | Для старых браузеров можно добавить role="main" для корректной поддержки. |
Корректно выделенный блок <main> делает структуру документа предсказуемой и понятной для вспомогательных технологий, что повышает доступность сайта без дополнительного кода.
Правильное размещение <main> относительно <header>, <nav> и <footer>
<main> должен находиться внутри элемента <body> и представлять основное содержимое страницы, отличное от повторяющихся структур, таких как шапка, навигация и подвал. Правильная структура помогает поисковым системам и вспомогательным технологиям точно определять ключевую часть документа.
- <header> располагается перед <main> и обычно содержит логотип, заголовок сайта, поиск и основные ссылки.
- <nav> может находиться внутри <header> или непосредственно перед <main>. Важно, чтобы навигация не прерывала логическую последовательность: пользователь должен быстро переходить к основному контенту с помощью ссылки «Пропустить к содержимому».
- <main> размещается только один раз на странице. Внутри него располагаются статьи, разделы или контент, уникальный для текущей страницы.
- <footer> следует после <main> и содержит контактную информацию, ссылки на политику конфиденциальности, копирайт и другие вспомогательные элементы.
Пример корректной структуры:
<body> <header>...</header> <nav>...</nav> <main>...</main> <footer>...</footer> </body>
Такое расположение обеспечивает логичную иерархию документа, улучшает доступность и упрощает восприятие контента пользователями и поисковыми системами.
Примеры типичной разметки с <main> для разных типов страниц
На странице блога основной контент помещается внутри <main>, чтобы поисковые системы и вспомогательные технологии сразу определяли ключевые материалы. Обычно это заголовок статьи, дата публикации, автор и текст публикации:
<main> <article> <h1>Заголовок статьи</h1> <p>Автор: Иван Иванов | 01.10.2025</p> <p>Текст статьи с ключевыми абзацами и подзаголовками.</p> </article> </main>
На интернет-магазине <main> содержит блоки с товарами, фильтры и категории, чтобы пользователи могли сосредоточиться на выборе продуктов без отвлекающих элементов навигации:
<main> <section class="product-list"> <h1>Каталог товаров</h1> <div class="product-item">Товар 1</div> <div class="product-item">Товар 2</div> </section> <aside class="filters"> <h2>Фильтры</h2> <p>Цена, бренд, категория</p> </aside> </main>
На странице портфолио <main> включает проекты, кейсы и описания навыков. Каждый проект оформляется как отдельный элемент <article>, что повышает семантическую значимость:
<main> <h1>Портфолио</h1> <article> <h2>Проект A</h2> <p>Описание проекта, используемые технологии, ссылка на демонстрацию.</p> </article> <article> <h2>Проект B</h2> <p>Краткое описание, результаты, изображения интерфейса.</p> </article> </main>
На новостной странице <main> обычно располагается список актуальных публикаций с датой, рубрикой и кратким анонсом. Каждый блок новости оформляется отдельным <article> для правильного индексирования:
<main> <h1>Последние новости</h1> <article> <h2>Новость 1</h2> <p>Дата: 04.10.2025 | Рубрика: Технологии</p> <p>Краткое содержание новости с ссылкой на полный текст.</p> </article> <article> <h2>Новость 2</h2> <p>Дата: 03.10.2025 | Рубрика: Экономика</p> <p>Описание с важными фактами и ссылкой на источник.</p> </article> </main>
Ошибки при применении <main> и способы их избежать
Ошибка: использование нескольких тегов <main> на одной странице. Согласно спецификации HTML5, разрешён только один <main> для обозначения основного контента. Несоблюдение этого правила нарушает семантику и ухудшает доступность для скринридеров. Решение: ограничиться одним тегом <main>, объединяя ключевой контент внутри него.
Ошибка: размещение <main> внутри <header>, <footer> или <article>. Такие вложения нарушают логическую структуру документа. Решение: вставлять <main> непосредственно в тело документа после <header> и до <footer>, не помещая его внутрь других секционных элементов.
Ошибка: включение второстепенного или декоративного контента в <main>. Элементы навигации, боковые панели и рекламу следует вынести за пределы <main>. Решение: использовать отдельные контейнеры, например <aside> или <nav>, чтобы выделить основной контент.
Ошибка: отсутствие уникального идентификатора для <main>. Хотя не обязательно, наличие id=»main» повышает совместимость с якорными ссылками и вспомогательными технологиями. Решение: добавлять id=»main» и при необходимости ссылаться на него из навигации.
Ошибка: некорректная структура внутри <main>. Включение только текстовых блоков без семантических заголовков и разделов ухудшает читаемость и SEO. Решение: использовать <section>, <article>, <h1>-<h2> внутри <main> для логического разделения информации.
Вопрос-ответ:
Зачем нужен тег в HTML?
Тег
Можно ли использовать несколько раз на одной странице?
Нет, на одной странице допускается только один тег
Загрузка...
