<main>
======

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

Интерактивный пример
--------------------

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

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

Атрибуты
--------

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

Примечание
----------

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

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

Пример
------


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

<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` (en-US). Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент `<main>` вместо объявления `role="main"`, если не нужна поддержка старых браузеров.

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

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

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


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

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

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


* WebAIM: Ссылки "Пропуск навигации"
### Режим чтения

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

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

| Specification |
| --- |
| HTML Standard # the-main-element |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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


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

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

* Основные структурные элементы: `<html>`, `<head>`, `<body>`
* Связанные с этим разделом элементы: `<article>`, `<aside>`, `<footer>`, `<header>`, or `<nav>`
* ARIA: роль main (en-US)