Skip to content

rus.md

Latest commit

 

History

History
196 lines (143 loc) · 11.4 KB

rus.md

File metadata and controls

196 lines (143 loc) · 11.4 KB

Элемент 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> следующим образом:

Основное содержание документа или приложения. Область, содержащая основные данные, которые непосредственно связаны или расширяют основную тему документа или основной функционал приложения.

Черновик спецификации HTML для редакторов W3C.

Так как элемент <main> теперь является частью спецификации HTML, то элемент <body> возвращает себе определение, которое было в спецификации HTML4.

Элемент body заключает в себе содержимое документа.

Черновик спецификации HTML для редакторов W3C.

Подробности

Важная особенность элемента <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 можно использовать как контейнер основного наполнения документа или другого элемента. С точки зрения семантики он представляет то, что содержит.

WHATWG HTML

Мы рекомендуем использовать элемент <main> согласно версии W3C, описанной выше.

Поддержка браузерами

Firefox 21, Chrome 26, и WebKit r140374 обеспечивают базовую поддержку элемента <main>.

Они все по умолчанию присваивают элементу <main> role="main" ARIA, чтобы вспомогательные технологии могли без проблем распознать его.

Выводы

Как видите, начать применять элемент <main> невероятно просто. Имплементация займет пару минут, так что настало время начинать использовать его на сайтах, которые вы разрабатываете.

Если вы не уверены, когда или где использовать <main>, задавайте вопросы в комментариях, и кто-то из нас попробует вам помочь разобраться.

Материалы для дальнейшего чтения