files/bg/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

---
title: <main>
slug: Web/HTML/Element/main
tags:
  - HTML
  - HTML групиране на съдържанието
  - main
  - Елемент
  - референция
translation_of: Web/HTML/Element/main
---
<div>{{HTMLRef}}</div>

<div><strong>HTML елементът <code>&lt;main&gt;</code> </strong> представя основното съдържание на частта {{HTMLElement("body")}} на документа, на негова част или на приложението. Тази зона, предназначена за основното съдържание, се състои от информация, която е пряко свързана с главната тема на документа или основната функционалност на приложението, или пък я допълва. Ако е необходимо, бихте могли да използвате няколко  <code>&lt;main&gt;</code> елемента в една и съща страница.  Например, когато имате  страница, която презентира няколко статии - всяка от които в собствен {{HTMLElement("article")}} елемент и всяка една от тях има допълнителни материали в себе си (като лента с инструменти за обработка, реклами и т.н.). В такъв случай, има смисъл да включите <code>&lt;main&gt;</code> елемент във всяка една статия, за да можете да обособите водещото съдържание за всяка конкретна статия.</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>None; both the starting and ending tags are mandatory.</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> (WHATWG). However, the W3C specification doesn't permit <code>&lt;main&gt;</code> to be used as a descendant of  {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}.</td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>The <code>main</code> role is applied to <code>&lt;main&gt;</code> by default, and the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> role is permitted as well.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p>Този елемент може да съдържа само глобалните атрибути (<a href="/en-US/docs/HTML/Global_attributes">global attributes</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> не влияе на DOM концепцията за структуриране на страницата. Функцията на този елемент е стриктно информативна.</p>

<h3 id="Разлики_между_WHATWG_и_W3C_спецификациите">Разлики между WHATWG и W3C спецификациите</h3>

<p>Дефиницията на елемента <code>&lt;main&gt;</code> е значително различна между стандарта <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element">WHATWG's living standard </a>(спецификациите, които MDN по споразумение) и <a href="https://w3c.github.io/html/grouping-content.html#the-main-element">the W3C specification</a>. Ето разликите между двете спецификации по примерите, дадени по-горе:</p>

<ul>
 <li>Стандартът за HTML WHATWG позволява няколко елемента <code>&lt;main&gt;</code> на една страница, докато версията на  <a href="https://www.w3.org/TR/html/grouping-content.html#the-main-element">the W3C version of the specification</a> не позволява. Прави изключение случаят в който освен един, всички останали елементи <code>&lt;main&gt;</code> са скрити посредством атрибута {{htmlattrxref("hidden")}}.</li>
 <li>Спецификацията WHATWG разрешава <code>&lt;main&gt;</code>да бъде използван навсякъде, където е позволено да има <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a> . Противно на това, версията на W3C не позволява  <code>&lt;main&gt;</code> да е вложен в {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}} или {{HTMLElement("nav")}}.</li>
</ul>

<p>Изглеждат много малко разликите, но елементът <code>&lt;main&gt;</code> е сравнително прост на функционално ниво. Ако се игнорират тези разлики, то те биха могли да доведат до значителни последици.</p>

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

<pre class="brush: html">&lt;!-- other content --&gt;

&lt;main&gt;
  &lt;h1&gt;Apples&lt;/h1&gt;
  &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;

  &lt;article&gt;
    &lt;h2&gt;Red Delicious&lt;/h2&gt;
    &lt;p&gt;These bright red apples are the most common found in many
    supermarkets.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

  &lt;article&gt;
    &lt;h2&gt;Granny Smith&lt;/h2&gt;
    &lt;p&gt;These juicy, green apples make a great filling for
    apple pies.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;
&lt;/main&gt;

&lt;!-- other content --&gt;</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Премахва органичението <code>&lt;main&gt;</code> да не бъде използван няколко пъти в документ или като вложен в елемента {{HTMLElement("article")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Без промяна от {{SpecName('HTML5 W3C')}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Съвместимост_с_браузърите">Съвместимост с браузърите</h2>

<p>Елементът <code>&lt;main&gt;</code> е широко поддържан. За Internet Explorer 11 и надолу, е препоръчително да се добави ARIA role of <code>"main"</code> kym elementa <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>
</ul>