<main>: Элемент main

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробуйте

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

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

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

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

Доступность

Опорная точка

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

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

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

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

html

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

WebAIM: Ссылки «Пропуск навигации»

Режим чтения

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

Создание веб-сайтов для режима чтения Safari и других приложений для чтения.

Примеры

html

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>…</p>
    <p>…</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>…</p>
    <p>…</p>
  </article>
</main>

<!-- other content -->

Результат

Техническое описание

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

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

Спецификация
Стандарт HTML # the-main-element

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`main`	26	12	21	16	7	26	21	14	7	1.5	4.4

См. также

Основные структурные элементы: <html>, <head>, <body>
Элементы, связанные с разделами: <article>, <aside>, <footer>, <header> или <nav>
ARIA: Роль основного элемента

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main