Элемент <main>

31.08.2013

Ричард Кларк

Оригинал: http://html5doctor.com/the-main-element

Перевод: Влад Мержевич

Недавно <main> был официально добавлен в спецификацию W3C HTML. Теперь, когда осела пыль, настало время погрузиться и узнать, где и когда будет уместно использовать <main>. Давайте начнём.

История

Включение элемента <main> (или подобного) уже давно обсуждается в рабочих группах с авторами и часто возникал вопрос, почему мы добавили новые элементы вроде <header>, <article> и <footer>, но нет элемента, который бы точно описывал основное содержимое страницы.

Стив Фолкнер, консультант по удобству подхода и наш новый автор, взял на себя трудную работу по исследованию, сбору данных и применению, а также поговорил с заинтересованными разработчиками. Как объясняет сам Стив, он говорил...

...со многими разработчиками (разработчиками браузеров и разработчиками удобства подхода), веб-разработчиками, авторами и пользователями и получил от них информацию и рекомендации. Я был там, где болтается множество людей: на IRC-каналах, в списках рассылки, Твиттере, блогах, конференциях — везде.

Стив Фолкнер

Это привело к тому, что он написал расширение спецификации для <main> и тщательно обосновал варианты применения.

Предложение было принято в ноябре 2012 года и затем <main> вошёл в спецификацию HTML5.1. Недавно он был добавлен в спецификации HTML5 и это не вызвало никаких возражений. Давайте посмотрим на то, как спецификация описывает <main>.

Спецификация W3C

Основная цель <main> — выступать основным элементом в HTML в карте ролей ARIA (Accessible Rich Internet Applications Suite). Это поможет скринридерам и другим услужливым технологиям понять, где начинается основное содержимое. Спецификации W3C описывает <main> так.

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

W3C HTML Editors Draft

Поскольку элемент <main> теперь включен в спецификацию HTML, элемент <body> в HTML4 изменил своё определение.

Элемент body представляет собой содержимое документа.

W3C HTML Editors Draft

Подробнее

Важным аспектом <main> является то, что он может быть использован на странице только один раз. Джереми Кит написал в рабочую группу, чтобы понять, почему это так (вернее, допускается ли несколько <main>). Хотя я не буду останавливаться на этом, обсуждение прочитать интересно.

Согласно спецификации валидатор W3C выдаст сообщение об ошибке если вы попытаетесь использовать несколько элементов <main> в документе.

Другим условием <main> является то, что он не может быть использован как дочерний у элемента <article>, <aside>, <footer>, <header> или <nav>.

Поскольку <main> не относится к структурным элементам, он не влияет на структуру документа подобно <article>, <nav> или <section>.

Отправная точка

Подобно многим другим новым элементам HTML5, не все браузеры понимают <main> или содержат набор стилей для него. Вам следует убедиться, что он отображается в CSS как блочный элемент.

main {display:block;}

В настоящее время вы также должны использовать JavaScript, чтобы создать элемент для старых версий IE.

<script>document.createElement('main');</script>

Конечно, если вы используете html5shiv, то <main> обновится напрямую.

Реализация <main> на HTML5 Doctor

Самый простой способ внедрения <main> заключается в замене <div> c id или class, который, вероятно, содержит вроде main или content.

Так как это выглядит на практике? Итак, вот наш код до применения <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>

Да, это действительно так просто. Если повезёт, то реализация займёт меньше пяти минут.

Версия WHATWG

Определение <main> от WHATWG отличается от версии W3C; элемент не несёт особого смысла. Это всего лишь стилевая обманка (как <div> с новым именем) и обрамление для дочерних элементов.

Элемент main может быть использован как контейнер для главного содержимое другого элемента. Он содержит дочерние элементы.

WHATWG HTML

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

Поддержка браузеров

В Firefox 21, Chrome 26 и WebKit r140374 реализована базовая поддержка <main>. Все они понимают атрибут ARIA role="main", так что услужливые технологии смогут распознать элемент <main> без проблем.

Резюме

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

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