Тег <main>

Описание

Тег <main> определяет основное содержимое документа, которое должно быть уникальным и не повторяться на других страницах сайта. Это семантический контейнер для главного контента страницы.

Базовая структура:
<body> <header>...</header> <main> <h1>Главный заголовок</h1> <!-- Уникальный контент страницы --> </main> <footer>...</footer> </body>
Сложная структура с ARIA:
<main id="main-content" role="main" aria-label="Основное содержимое"> <article> <h1>Новости компании</h1> <!-- Контент статьи --> </article> <aside>Дополнительная информация</aside> </main>

Ключевые особенности:

  • Должен быть один на странице (исключение: скрытые/архивные версии)
  • Не должен содержать повторяющиеся элементы (хедер, футер, навигацию)
  • Является ориентиром (landmark) для доступности
  • По умолчанию не имеет стилей, но может быть свободно стилизован
  • Важен для SEO и структуры документа

Рекомендации по использованию:

  • Всегда добавляйте role="main" для совместимости со старыми браузерами
  • Для SPA-приложений обновляйте содержимое main при навигации
  • Добавляйте tabindex="-1" для программного фокуса
  • Избегайте вложенности других семантических тегов (article, section)
  • Используйте с ARIA-атрибутами для улучшения доступности

Тег <main> является ключевым структурным элементом современной веб-разметки, определяющим основное содержание документа.

Атрибуты

accesskey Горячая клавиша для активации элемента
class CSS-классы для стилизации элемента
contenteditable Разрешает редактирование содержимого
data-* Пользовательские данные элемента
dir Направление текста (ltr|rtl)
hidden Скрывает элемент от отображения
id Уникальный идентификатор элемента
lang Язык содержимого элемента
spellcheck Включает проверку орфографии
style Инлайновые CSS-стили элемента
tabindex Порядок перехода при навигации по Tab
title Всплывающая подсказка для элемента
translate Определяет возможность перевода содержимого

Поддержка браузерами
12.0 26.0 16.0 21.0 7.0