files/ru/web/html/element/main/index.html


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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

---
title: <main>
slug: Web/HTML/Element/main
tags:
  - Element
  - HTML
  - HTML группировка контента
  - HTML секции
  - main
  - Справка
  - Элемент
translation_of: Web/HTML/Element/main
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;main&gt;</code></strong> предназначен для основного контента (содержимого) {{HTMLElement("body")}} документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div>

<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам "pull request" (предложение изменения кода в чужом репозитории).</p>

<p>Документ не должен иметь более одного элемента <code>&lt;main&gt;</code> у которого не указан атрибут {{htmlattrxref("hidden")}}.</p>

<table class="properties">
 <tbody>
  <tr>
   <th><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
  </tr>
  <tr>
   <th>Разрешённое содержимое</th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td>
  </tr>
  <tr>
   <th>Пропуск тега</th>
   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
  </tr>
  <tr>
   <th>Разрешённые родительские элементы</th>
   <td>Те, в которых разрешается <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого, но только если это <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">иерархически корректный <code>main</code> элемент</a>.</td>
  </tr>
  <tr>
   <th>Разрешённые ARIA роли</th>
   <td>Роль <code>main</code> применяется к <code>&lt;main&gt;</code> по умолчанию, и роль <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> также разрешена.</td>
  </tr>
  <tr>
   <th>DOM-интерфейс</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>К этому элементу применимы только <a href="/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">глобальные атрибуты</a>.</p>

<h2 id="Примечание">Примечание</h2>

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

<p><code>&lt;main&gt;</code> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как {{HTMLElement("body")}}, заголовков, таких как {{HTMLElement("h2")}} и т.п., <code>&lt;main&gt;</code> не влияет на концепцию {{glossary("DOM")}} структуры страницы. Он носит исключительно информативный характер.</p>

<h2 id="Пример">Пример</h2>

<pre class="brush: html">&lt;!-- другой контент --&gt;

&lt;main&gt;
  &lt;h1&gt;Яблоки&lt;/h1&gt;
  &lt;p&gt;Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.&lt;/p&gt;

  &lt;article&gt;
    &lt;h2&gt;Сорт "Ред Делишес"&lt;/h2&gt;
    &lt;p&gt;Эти ярко-красные яблоки являются одними из самых популярных в Соединённых Штатах.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

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

&lt;!-- другой контент --&gt;</pre>

<h3 id="Результат">Результат</h3>

<p>{{EmbedLiveSample("Пример")}}</p>

<h2 id="Проблемы_доступности">Проблемы доступности</h2>

<h3 id="Ориентир">Ориентир</h3>

<p>Элемент <code>&lt;main&gt;</code> ведёт себя как <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">роль-ориентир <code>main</code></a>. <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">Ориентиры</a> могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <code>&lt;main&gt;</code> вместо объявления <code>role="main"</code>, если не нужна <a href="/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">поддержка старых браузеров</a>.</p>

<h3 id="Пропуск_навигации">Пропуск навигации</h3>

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

<p>Добавление атрибута {{htmlattrxref("id")}} в элемент <code>&lt;main&gt;</code> позволяет ему становится целью для ссылки пропуска навигации.</p>

<pre><span class="tag">&lt;body</span><span class="tag">&gt;
  &lt;a href="#main-content"&gt;Перейти к основному контенту&lt;/a&gt;

  &lt;!-- навигация и заголовок контента --&gt;

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

<ul>
 <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: Ссылки "Пропуск навигации"</a></li>
</ul>

<h3 id="Режим_чтения">Режим чтения</h3>

<p>Функционально режим чтения браузера будет искать наличие элемента <code>&lt;main&gt;</code>, а также элементов <a href="/ru/docs/Web/HTML/Element/Heading_Elements">заголовка</a> и <a href="/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">секционных элементов</a>, которые преобразовывают контент в специальный вид для чтения.</p>

<ul>
 <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Создание сайтов для режима чтения Safari и других программ чтения.</a></li>
</ul>

<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

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

<pre class="brush: html">&lt;main role="main"&gt;
  ...
&lt;/main&gt;
</pre>

<p>{{Compat("html.elements.main")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Основные структурные элементы: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
 <li>Связанные с этим разделом элементы: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li>
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">ARIA: роль main</a></li>
</ul>