HTML-элемент <main> предназначен для основного контента (содержимого) <body> документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или ее развивает.

Документ не должен иметь более одного элемента <main> у которого не указан атрибут hidden.

Категории контента Потоковый контент, явный контент.
Разрешенное содержимое Потоковый контент.
Пропуск тега Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Разрешенные родительские элементы Те, в которых разрешается потоковый контент, но только если это иерархически корректный main элемент.
Разрешенные роли ARIA Роль main применяется к <main> по умолчанию, и роль presentation также разрешена.
DOM-интерфейс HTMLElement

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

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

<main> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как <body>, заголовков, таких как <h2> и т.п., <main> не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.

Пример

<!-- другой контент -->

<main>
  <h1>Яблоки</h1>
  <p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.</p>
  
  <article>
    <h2>Сорт "Ред Делишес"</h2>
    <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединенных Штатах.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Сорт "Гренни Смит";/h2>
    <p>Эти сочные, зеленые яблоки являются одними из самых популярных в мире.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

<!-- другой контент -->

Проблемы доступности

Ориентир

Элемент <main> ведет себя как main роль ориентира (landmark role). Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <main> вместо объявления role="main", если не нужна поддержка старых браузеров.

Пропуск навигации

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

Добавление атрибута id в элемент <main> позволяет ему становится целью для ссылки пропуска навигации.

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

  <!-- навигация и заголовок контента -->

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

Режим чтения

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

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение '<main>' в этой спецификации.
Живой стандарт  
HTML 5.1
Определение '<main>' в этой спецификации.
Рекомендация Нет изменений с HTML5.
HTML5
Определение '<main>' в этой спецификации.
Рекомендация Первоначальное определение.

Поддержка браузерами

Элемент <main> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA "main" в элемент <main>, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента <main> после добавления атрибута role).

<main role="main">
  ...
</main>

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
mainChrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 21IE Нет поддержки НетOpera Полная поддержка 16Safari Полная поддержка 7WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 21Opera Android Полная поддержка ДаSafari iOS Полная поддержка 7.1Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: JCodeg, mdnwebdocs-bot
Обновлялась последний раз: JCodeg,