Тег <main> обозначает основное содержимое страницы - то, ради чего посетитель на неё пришёл, без шапки, подвала и боковых блоков. Тег парный, закрывающий </main> обязателен. Главная его особенность в том, что на странице он должен быть единственным, и этим <main> отличается от остальных семантических тегов.
В этой статье
Для чего нужен тег main в HTML
Оформления тег не добавляет: содержимое выглядит одинаково и в <main>, и в обычном <div>. Польза начинается там, где страницу разбирают программы.
Скринридер получает ориентир основного содержимого и может перенести на него фокус одной командой - без прохода по всему меню. Режим чтения в браузере по этому же признаку решает, какую часть страницы оставить, а что убрать как обвязку. Поисковый робот отличает уникальный текст страницы от блоков, повторяющихся на всём сайте.
<body>
<header>...</header>
<main>
<h1>Заголовок страницы</h1>
<p>Текст, ради которого страницу открыли.</p>
</main>
<footer>...</footer>
</body>Пример: какую часть страницы занимает main
Сколько тегов main может быть на странице
Ровно один. Это редкий случай в HTML, когда спецификация прямо ограничивает количество: у <header>, <nav> или <section> ограничений нет, а видимый <main> в документе допускается только один.
Логика простая: тег отвечает на вопрос "где здесь главное". Два ответа на этот вопрос смысла не имеют - скринридер не сможет выбрать, куда переносить фокус, а валидатор W3C выдаст ошибку.
Исключение одно, и оно техническое. Спецификация допускает несколько <main>, если все лишние скрыты атрибутом hidden. Это сделано для одностраничных приложений, где разметка всех экранов находится в документе сразу, а показывается по очереди.
<main>Экран, который сейчас открыт</main>
<main hidden>Другой экран приложения</main>
<main hidden>И ещё один</main>Для обычного сайта на Blogger или любой другой CMS этот приём не нужен: там каждая страница загружается отдельно, и <main> на ней один.
Что размещают внутри main, а что оставляют снаружи
Правило формулируется одной фразой: внутри <main> находится то, что на этой странице уникально, а снаружи - то, что повторяется на всех остальных. Разбор по конкретным блокам ниже.
| Внутри main | Снаружи main |
|---|---|
Заголовок <h1> и текст страницы |
Логотип и название сайта |
| Статьи, карточки товаров, результаты поиска | Главное меню в <nav> |
| Формы, относящиеся к этой странице | Боковая колонка со ссылками на другие разделы |
| Иллюстрации и таблицы по теме страницы | Подвал с контактами и копирайтом |
Форма поиска - пограничный случай. В шапке сайта она относится к обвязке и остаётся снаружи. Но на странице результатов поиска она и есть основное содержимое, так что там её место внутри <main>. Смысл определяется страницей, а не самим блоком.
main рядом с header, footer, article и section
Соседей у тега два, и оба располагаются на одном уровне с ним, прямо внутри <body>: header сверху и <footer> снизу. А вот <article>, <section> и <aside> обычно находятся уже внутри <main> - они делят основное содержимое на части.
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>
<section>...</section>
<section>...</section>
</article>
<aside>Материалы по теме статьи</aside>
</main>
<footer>...</footer>
</body>Обратное вложение запрещено: <main> не должен быть потомком <article>, <aside>, <footer>, header или nav. Причина та же, что и с количеством: основное содержимое документа не может находиться внутри его же обвязки.
Про <aside> стоит оговориться отдельно. Внутри <main> он уместен, когда относится к конкретной статье - врезка с материалами по теме. Общая боковая колонка сайта, одинаковая на всех страницах, выносится за пределы <main>, рядом с ним.
Переход к основному содержимому
Самая заметная польза от <main> проявляется не на экране, а на клавиатуре. Посетитель, который перемещается по странице клавишей Tab, без специальной ссылки вынужден пройти всё меню, прежде чем доберётся до текста - и так на каждой странице сайта.
Нажимайте кнопку ниже и следите за счётчиком: слева страница без ссылки-перехода, справа - со ссылкой на <main>.
Без ссылки-перехода
- Логотип
- Главная
- Блог
- Каталог
- О нас
- Контакты
- Поиск
- Основной текст
Нажатий: 0
Со ссылкой на main
- Перейти к основному содержимому
- Основной текст
Нажатий: 0
Счётчики на нуле. Нажимайте Tab и смотрите, за сколько шагов каждая страница доводит до текста.
Первое нажатие: слева фокус на логотипе, справа - на ссылке-переходе. Следующий шаг разведёт эти две страницы окончательно.
Справа фокус уже на основном тексте. Слева впереди ещё пункты меню и поиск - и так на каждой странице сайта.
Восемь нажатий против двух. Разницу даёт ссылка-переход, а она возможна только потому, что у основного содержимого есть адрес - id на теге main.
Разметка такой ссылки занимает две строки. Ссылку обычно прячут за пределами экрана и показывают только при получении фокуса с клавиатуры, чтобы она не мешала остальным посетителям.
<a href="#content" class="skip-link">Перейти к основному содержимому</a>
<header>...</header>
<main id="content">...</main>Частые ошибки
Три из четырёх ошибок ниже браузер покажет без единой жалобы - страница будет выглядеть правильно, а семантика окажется сломанной. Поэтому разметку с <main> стоит хотя бы раз прогнать через валидатор W3C.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
На странице несколько видимых <main> |
Валидатор выдаёт ошибку, скринридер не может определить основной блок | Оставить один, остальные заменить на <section> или <div> |
<main> прописан внутри <header>, <footer> или <article> |
Основное содержимое оказывается частью обвязки, структура документа ломается | Вынести <main> на верхний уровень, прямо внутрь <body> |
В <main> попали шапка, меню или подвал |
Режим чтения и поисковый робот считают повторяющиеся блоки частью текста страницы | Оставить внутри только уникальное содержимое |
К тегу дописан role="main" |
Роль дублируется - тег уже имеет её по умолчанию | Убрать атрибут |
Вопросы и ответы
Поддерживают ли браузеры тег main?
Да, все современные браузеры поддерживают его с 2015 года. Отдельного внимания требовал только Internet Explorer 11 и более старые версии - там тегу дописывали role="main", чтобы скринридер его распознал. Сегодня этот приём не нужен.
Влияет ли тег main на SEO?
Позиций сам по себе он не добавляет - это не фактор ранжирования. Но он помогает поисковому роботу отличить уникальный текст страницы от блоков, которые повторяются на всём сайте, и в этом смысле работает на пользу разметки в целом.
