<main>
представя основното съдържание на частта <body>
на документа, на негова част или на приложението. Тази зона, предназначена за основното съдържание, се състои от информация, която е пряко свързана с главната тема на документа или основната функционалност на приложението, или пък я допълва. Ако е необходимо, бихте могли да използвате няколко <main>
елемента в една и съща страница. Например, когато имате страница, която презентира няколко статии - всяка от които в собствен <article>
елемент и всяка една от тях има допълнителни материали в себе си (като лента с инструменти за обработка, реклами и т.н.). В такъв случай, има смисъл да включите <main>
елемент във всяка една статия, за да можете да обособите водещото съдържание за всяка конкретна статия.Content categories | Flow content, palpable content. |
---|---|
Permitted content | Flow content. |
Tag omission | None; both the starting and ending tags are mandatory. |
Permitted parents | Any element that accepts flow content (WHATWG). However, the W3C specification doesn't permit <main> to be used as a descendant of <article> , <aside> , <footer> , <header> , or <nav> . |
Permitted ARIA roles | The main role is applied to <main> by default, and the presentation role is permitted as well. |
DOM interface | HTMLElement |
Атрибути
Този елемент може да съдържа само глобалните атрибути (global attributes).
Бележки за употребата
Съдържанието на елемента <main>
трябва да бъде уникално за документа или за частта, която го съдържа. Съдържание, което е повтарящо се през съответния набор от документи или частите на документа като: странични ленти, линкове за навигация, информация за правата, лога на сайта и форми за търсене не бива да са включени, освен ако формата за търсене не е основната функционалност на страницата.
<main>
не допринася за схемата на документа. За разлика от елементи като <body>
, заглавия <h2>
, и други, <main>
не влияе на DOM концепцията за структуриране на страницата. Функцията на този елемент е стриктно информативна.
Разлики между WHATWG и W3C спецификациите
Дефиницията на елемента <main>
е значително различна между стандарта WHATWG's living standard (спецификациите, които MDN по споразумение) и the W3C specification. Ето разликите между двете спецификации по примерите, дадени по-горе:
- Стандартът за HTML WHATWG позволява няколко елемента
<main>
на една страница, докато версията на the W3C version of the specification не позволява. Прави изключение случаят в който освен един, всички останали елементи<main>
са скрити посредством атрибутаhidden
. - Спецификацията WHATWG разрешава
<main>
да бъде използван навсякъде, където е позволено да има flow content . Противно на това, версията на W3C не позволява<main>
да е вложен в<article>
,<aside>
,<footer>
,<header>
или<nav>
.
Изглеждат много малко разликите, но елементът <main>
е сравнително прост на функционално ниво. Ако се игнорират тези разлики, то те биха могли да доведат до значителни последици.
Пример
<!-- 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 -->
Спецификации
Спецификация | Статус | Коментар |
---|---|---|
HTML Living Standard The definition of '<main>' in that specification. |
Living Standard | Премахва органичението <main> да не бъде използван няколко пъти в документ или като вложен в елемента <article> . |
HTML 5.1 The definition of '<main>' in that specification. |
Recommendation | Без промяна от HTML5. |
HTML5 The definition of '<main>' in that specification. |
Recommendation | Initial definition. |
Съвместимост с браузърите
Елементът <main>
е широко поддържан. За Internet Explorer 11 и надолу, е препоръчително да се добави ARIA role of "main"
kym elementa <main>
, за да се подсигурите, че е достъпен(екранни четци като JAWS, използвани със стари версии на Internet Explorer, ще могат да разберат семантичното значение на елемента <main>
, когато този атрибут role
бъде добавен).
<main role="main"> ... </main>
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 26 | 12 | 21 | No | 16 | 7 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | 12 | 21 | Yes | 7.1 | Yes |