/
index.md
113 lines (74 loc) · 9.91 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
---
title: <main>
slug: Web/HTML/Element/main
---
{{HTMLSidebar}}
**HTML-элемент `<main>`** предназначен для основного контента (содержимого) {{HTMLElement("body")}} документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.
{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}
Документ не должен иметь более одного элемента `<main>` у которого не указан атрибут [`hidden`](/ru/docs/Web/HTML/Global_attributes#hidden).
| [Категории контента](/ru/docs/Web/Guide/HTML/Content_categories) | [Основной поток](/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток), [явный контент](/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент). |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Допустимое содержимое | [Основной поток](/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток). |
| Пропуск тегов | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. |
| Допустимые родители | Те, в которых разрешается [контент основного потока](/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток) в качестве содержимого, но только если это [иерархически корректный `main` элемент](https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element). |
| Допустимые ARIA-роли | Роль `main` применяется к `<main>` по умолчанию, и роль [`presentation`](/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) также разрешена. |
| DOM-интерфейс | {{domxref("HTMLElement")}} |
## Атрибуты
К этому элементу применимы только [глобальные атрибуты](/ru/docs/Web/HTML/%D0%9E%D0%B1%D1%89%D0%B8%D0%B5_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B).
## Примечание
Содержимое элемента `<main>` должно быть уникальным для документа. Содержимое, которое повторяется в наборе документов или разделах документа, такое как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайта и поисковые формы, не должно добавляться, за исключением формы поиска, если она является основной функцией страницы.
`<main>` не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как {{HTMLElement("body")}}, заголовков, таких как {{HTMLElement("h2")}} и т.п., `<main>` не влияет на концепцию {{glossary("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>
<!-- другой контент -->
```
### Результат
{{EmbedLiveSample("Пример")}}
## Проблемы доступности
### Ориентир
Элемент `<main>` ведёт себя как [роль-ориентир `main`](/ru/docs/Web/Accessibility/ARIA/Roles/Main_role). [Ориентиры](/ru/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles) могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент `<main>` вместо объявления `role="main"`, если не нужна [поддержка старых браузеров](/ru/docs/Web/HTML/Element/main#%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D0%BC%D0%B8).
### Пропуск навигации
Пропуск навигации, также известный как "skipnav", это техника которая позволяет пользователю вспомогательных технологий совершать быстрый обход больших разделов повторяющегося контента (главная навигация, информационные баннеры и т.д.). Это позволяет пользователю получить доступ к основному контенту страницы быстрее.
Добавление атрибута [`id`](/ru/docs/Web/HTML/Global_attributes#id) в элемент `<main>` позволяет ему становится целью для ссылки пропуска навигации.
```html
<body>
<a href="#main-content">Перейти к основному контенту</a>
<!-- навигация и заголовок контента -->
<main id="main-content">
<!-- основной контент страницы -->
</main>
</body>
```
- [WebAIM: Ссылки "Пропуск навигации"](https://webaim.org/techniques/skipnav/)
### Режим чтения
Функционально режим чтения браузера будет искать наличие элемента `<main>`, а также элементов [заголовка](/ru/docs/Web/HTML/Element/Heading_Elements) и [секционных элементов](/ru/docs/Web/HTML/Element#%D0%A1%D0%B5%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B0%D0%BD%D0%B8%D1%8F), которые преобразовывают контент в специальный вид для чтения.
- [Создание сайтов для режима чтения Safari и других программ чтения.](https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9)
## Спецификации
{{Specifications}}
## Совместимость с браузерами
Элемент `<main>` широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль {{glossary("ARIA")}} `"main"` в элемент `<main>`, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента `<main>` после добавления атрибута `role`).
```html
<main role="main">...</main>
```
{{Compat}}
## Смотрите также
- Основные структурные элементы: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}
- Связанные с этим разделом элементы: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}
- [ARIA: роль main](/ru/docs/Web/Accessibility/ARIA/Roles/Main_role)