Элемент main
Элемент <main>
недавно был официально добавлен в спецификацию HTML W3C. Теперь,
когда шумиха по этому поводу немного улеглась, настало время разобраться, где и
когда имеет смысл его использовать. Итак, приступим.
История
Включение в спецификацию тега main
или ему подобного обсуждалось в рабочих
группах довольно долго, часто поднимался вопрос, почему есть такие элементы,
как <header>
, <article>
или <footer>
, но нет элемента, который бы
содержал основное наполнение страницы.
Стив Фолкнер (Steve Faulkner), консультант по вопросам доступности материалов и один из редакторов проекта html5 doctor, потрудился собрать данные, примеры использования и пообщался с разработчиками. По словам Стива, он говорил:
со всеми, кто связан с его имплементацией в браузерах, специалистами по вопросам доступности материалов, разработчиками веб-страниц, авторами и пользователями, которых смог найти, и получил их советы и отзывы. Я искал их в самых разных местах: в IRC, почтовых рассылках, твиттере, блогах, конференциях — везде.
Это привело к написанию расширения спецификации для элемента <main>
и
обоснованию случаев его применения.
«Предложение» было принято в ноябре 2012, и тег <main>
был добавлен в
спецификацию HTML 5.1. Недавно он был добавлен еще и в спецификацию HTML5, что
ни у кого не вызвало возражений. Давайте посмотрим, что спецификация говорит об
элементе <main>
.
Спецификация W3C
До тех пор, пока все браузеры не начнут по умолчанию присваивать соответствующую
роль элементу <main>
, стоит использовать атрибут role
, который предлагает
ARIA.
Основное назначение элемента <main>
в том, чтобы привязать значение main
атрибута role
ARIA к определенному элементу HTML. Это поможет скринридерам и
прочим вспомогательным технологиям определять, где начинается основное содержание
документа. Спецификация W3C описывает <main>
следующим образом:
Основное содержание документа или приложения. Область, содержащая основные данные, которые непосредственно связаны или расширяют основную тему документа или основной функционал приложения.
Так как элемент <main>
теперь является частью спецификации HTML, то элемент
<body>
возвращает себе определение, которое было в спецификации HTML4.
Элемент
body
заключает в себе содержимое документа.
Подробности
Важная особенность элемента <main>
— это то, что он может быть использован в
документе только один раз. Джереми Кит (Jeremy Keith) задал рабочей группе
вопрос о том, почему нельзя использовать множество элементов <main>
. Я
не буду углубляться в подробности, но рекомендую прочесть эту дискуссию.
Что касается спецификации, то если вы попытаетесь использовать больше одного
элемента <main>
в документе, валидатор W3C выведет ошибку.
Кроме того, <main>
не может быть потомком элементов <article>
, <aside>
,
<footer>
, <header>
, или <nav>
.
Так как <main>
не предназначен для разбиения наполнения на части, он не
влияет на структуру документа так, как это делают элементы <article>
,
<nav>
или <section>
.
Приступим
Так же, как и при появлении множества других новых элементов HTML5, не все
браузеры распознают <main>
и содержат стили для него. Чтобы быть уверенным,
что они есть, стоит добавить в CSS правило, которое сделает main
блочным
элементом.
main {display:block;}
Кроме того, для старых IE вам понадобится создать элемент c помощью JavaScript:
<script>document.createElement('main');</script>
Естественно, если вы используете html5shiv, <main>
в него уже включен.
Использование элемента <main>
на сайте HTML5 Doctor
Самый простой способ использовать <main>
— заменить им <div>
, который вы,
скорее всего, пометили id
или class
со значениями вроде main
или content
.
Так как это выглядит на практике? Ну, ниже представлена разметка HTML5 Doctor
до имплементации <main>
.
<body>
<header role="banner">
[...]
</header>
<div id="content" class="group" role="main">
[...]
</div>
<footer role="contentinfo">
[...]
</footer>
</body>
И вот так она выглядит сейчас:
<body>
<header role="banner">
[...]
</header>
<main id="content" class="group" role="main">
[...]
</main>
<footer role="contentinfo">
[...]
</footer>
</body>
id="content"
мы в определенный момент тоже убрали.
Да, все действительно настолько просто. В самом худшем случае для имплементации не потребуется и пяти минут.
Версия WHATWG
Определение элемента <main>
, которое дает WHATWG, отличается от определения
элемента по версии W3C тем, что WHATWG не наделяет его определенным значением.
Это не более, чем элемент, который используется для применения стилей (что-то
вроде нового <div>
), и с точки зрения семантики представляет то, что содержит.
Элемент
main
можно использовать как контейнер основного наполнения документа или другого элемента. С точки зрения семантики он представляет то, что содержит.
Мы рекомендуем использовать элемент <main>
согласно версии W3C, описанной выше.
Поддержка браузерами
Firefox 21, Chrome 26, и WebKit r140374 обеспечивают базовую поддержку
элемента <main>
.
Они все по умолчанию присваивают элементу <main>
role="main"
ARIA,
чтобы вспомогательные технологии могли без проблем распознать его.
Выводы
Как видите, начать применять элемент <main>
невероятно просто. Имплементация
займет пару минут, так что настало время начинать использовать его на сайтах,
которые вы разрабатываете.
Если вы не уверены, когда или где использовать <main>
, задавайте вопросы в
комментариях, и кто-то из нас попробует вам помочь разобраться.
Материалы для дальнейшего чтения
- Sitepoint — Элемент main HTML5
- MDN — main
- Ян Делвин (Ian Devlin) — элемент main
- Брюс Лоусон (Bruce Lawson) — Использование элемента main
- Filament Group — элемент main
- W3C — Примеры использования элемента main
- Web Monkey — элемент main получает главную роль в html
- Web Monkey — элемент main поможет html перейти к сути