This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<main>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
HTML-элемент<main> представляет основное содержимоетела документа. Эта область должна состоять из содержимого, которое напрямую связано с центральной темой документа или с основными функциями приложения.
Интерактивный пример
<header>Gecko facts</header><main> <p> Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica. </p> <p> Many species of gecko have adhesive toe pads which enable them to climb walls and even windows. </p></main>header { font: bold 7vw Arial, sans-serif;}Документ не должен иметь более одного элемента<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.Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент<main> вместо объявленияrole="main", если не нужнаподдержка старых браузеров.
Пропуск навигации
Пропуск навигации, также известный как "skipnav", это техника которая позволяет пользователю вспомогательных технологий совершать быстрый обход больших разделов повторяющегося контента (главная навигация, информационные баннеры и т.д.). Это позволяет пользователю получить доступ к основному контенту страницы быстрее.
Добавление атрибутаid в элемент<main> позволяет ему становится целью для ссылки пропуска навигации.
<body> <a href="#main-content">Перейти к основному контенту</a> <!-- навигация и заголовок контента --> <main> <!-- основной контент страницы --> </main></body>Режим чтения
Функционально режим чтения браузера будет искать наличие элемента<main>, а также элементовзаголовка исекционных элементов, которые преобразовывают контент в специальный вид для чтения.
Спецификации
| Specification |
|---|
| HTML # the-main-element |
Совместимость с браузерами
Элемент<main> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить рольARIA"main" в элемент<main>, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента<main> после добавления атрибутаrole).
<main role="main">...</main>