HTML5 — качественный скачок для веб-разработки. Он дал веб-разработчикам множество инструментов, которых нам по-настоящему не хватало. Но не все нововведения HTML5 одинаково полезны. Так, есть вполне объективные причины отказаться от использования элементов header, footer, nav, aside, article и section. Но обо всем по порядку.

Структура документа

Структура документа — иерархическое представление веб-страницы, оно создается автоматически на основе верстки. Структура используется, в частности, поисковыми системами и устройствами для людей с ограниченными возможностями. И если людей с ограниченными возможностями многие верстальщики могут игнорировать, ссылаясь на целевую аудиторию сайта, то игнорировать поисковики не станет ни один более-менее вменяемый верстальщик.

Во всех версиях HTML до HTML5 структура документа составляется из заголовков — элементов h1-h6. Каждый заголовок одного уровня включает в себя все, что находится «под ним» вплоть до следующего заголовка такого же уровня. Напомню, что страница не должна содержать более одного заголовка h1. Рассмотрим упрощенный пример типичной верстки блога:

<h1>Мой бложек</h1>
    <h2>Последние записи</h2>
        <h3>Не могу по карте найти выход из леса, помогите!</h3>
        <h3>Наконец купил себе iPhone 5! Теперь я самый модный парень на районе!</h3>
        <h3>Сегодня вышел iPhone 5! Коплю деньги и питаюсь ягодками и грибочками</h3>

    <h3>Сайдбар</h3>
        <h4>Архив записей</h4>
        <h4>Популярные записи</h4>
        <h4>Облако тегов</h4>

    <h4>Другое</h4>
        <h5>Я на твитторе</h5>
        <h5>Мои фоточки на Instagram</h5>
        <h5>Блог моего братюни Коляна</h5>

Структура такого документа будет иметь следующий вид:

Структура документа Структура документа

Как видим, структура документа некорректна. Сайдбар не должен быть подразделом раздела последних записей. Он должен быть отдельным разделом. Меняем верстку и используем элемент h2 для заголовка сайдбара. Получаем следующую структуру документа:

Обновленная структура документа Обновленная структура документа

Но теперь теряется семантическая важность заголовка, мы просто пытаемся исправить структуру документа с помощью ограниченного набора тегов.

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

В первом черновом варианте спецификации не увидевшего свет XHTML 2.0 было предложено новое решение проблемы создания структуры документа. Оно предполагало создания разделов с использованием тега section и общего тега h для всех заголовков. Это приводит нас к текущему положению вещей в HTML5.

Создание структуры документа в HTML5

В HTML5 попытались внедрить концепцию создания структуры документа из XHTML 2.0 в HTML и при этом сохранить определенную долю обратной совместимости. Результаты неоднозначны. Вот как предлагается создавать структуру документа в HTML5:

  • Каждый раздел документа определяется одним из четырех секционных тегов: section, article, nav и aside; теги h1-h6 для создания разделов в структуре документа не используются. Цель — решить проблемы ограниченности h1-h6 о которой я писал выше.
  • В HTML5 нет общего тега h для всех заголовков. Вместо этого в чистом HTML5 предлагается использовать h1 для всех заголовков, уровень любого заголовка будет определяться уровнем его вложенности в секционных тегах.
  • Но чистого HTML5 на данный момент не существует, поэтому в целях обратной совместимости нужно использовать теги h1-h6.

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

Но настоящая проблема использования этого подхода даже не в его сложности. Проблема заключается в том, что нас с самого начала дезинформировали. Давайте вспомним, что говорили нам авторы HTML5 про новые семантические элементы в HTML5.

В 2009 году, Йен Хиксон, создатель тестов Acid2 и Acid3, а также один из авторов спецификации HTML5, сказал следующее:

Они [новые элементы], более или менее реализуют наиболее частые просьбы веб-разработчиков на основании наиболее распространенных значений атрибута class. Их основным предназначением является упрощение верстки и создания стилей.

Если вы когда-нибудь пытались читать спецификации W3C, вам наверняка известно, что они в большей степени написаны для разработчиков браузеров, а не для веб-разработчиков. Поэтому веб-разработчики в большей степени полагаются на авторов спецификации и статьи в тематических блогах, в которых спецификация объясняется понятным для нас языком.

Сторонникам HTML5 стоило объяснять назначение новых элементов доступнее, либо вовсе от них отказаться. Теперь фактически мы имеем две версии HTML5: официальная версия от W3C и WHATWG и версия веб-сообщества.

Правильная разметка страницы с использованием HTML5

Давайте подробнее рассмотрим, как на самом деле предполагается использовать новые семантические элементы в верстке:

  • Теги section, article, nav и aside используются для создания структуры разделов документа.
  • Теги header и footer используются внутри каждого раздела для определения шапки и подложки раздела соответственно. В данном контексте разделом могут быть как разделы, созданные с помощью новых элементов, так и корневой раздел — сам элемент body.
  • Теги h1-h6 используются для создания заголовков разделов в структуре документа, а также для обратной совместимости (читай «совместимости в ближайшем будущем», ведь на данный момент почти никто не поддерживает HTML5-структуру документов).
Такая схема неверна! Не используйте ее! Такая схема неверна! Не используйте ее!

Думаете, можно просто заменить все элементы div новыми элементами? Как бы не так! Согласно спецификации, секционные элементы нельзя использовать там, где нужна простая зацепка для каскадных стилей, так что элементы div из «чистого» HTML5-документа никуда не денутся. Более того, в «чистом» HTML5-документе будут:

  • группа элементов section, article, nav и aside для создания структуры;
  • куча элементов div для создания стилей;
  • избыточное использование тегов h1-h6 для создания обратной совместимости;
  • все это приправлено избыточными элементами header и footer внутри каждого раздела, которые ничего не делают.

Вы уже чувствуете «упрощение верстки»? Ну, тогда перейдем к «упрощению создания стилей».

Создание стилей для заголовков в HTML5

Давайте представим себе будущее, где уже не нужно думать об обратной совместимости и мы с чистой совестью можем использовать элементы h1 для всех заголовков всех разделов.

Допустим, у нас есть элемент h1, на третьем уровне вложенности (по сути, элемент h3). Какой именно селектор будет его выбирать в наших таблицах стилей? Можете себе представить селекторы для выбора заголовков всех уровней? Не волнуйтесь, я вам помогу:

h1 {font-size: 36px} /* h1 */
section h1 {font-size: 28px} /* h2 */
section section h1 {font-size: 22px} /* h3 */
section section section h1 {font-size: 18px} /* h4 */
section section section section h1 {font-size: 16px} /* h5 */
section section section section section h1 {font-size: 14px} /* h6 */

Это сильно упрощенный пример, который совершенно не учитывает существование трех остальных секционных тегов. Просто ради смеха, вот полноценный пример.

Количество селекторов для выбора заголовков всех растет в геометрической прогрессии! Количество селекторов для выбора заголовков всех уровней растет в геометрической прогрессии!

Тут единственное решение — использовать классы для заголовков. Но ведь избавление от классов — та самая проблема, которую пытались решить WHATWG! А если представить себе инструкции для клиентов, использующих CMS для наполнения своих сайтов, хочется встать и уехать.

Что же делать?

Производители ПО для людей с ограниченными возможностями используют альтернативу структуры документов HTML. Так что нам на самом деле не нужно использовать новые элементы. Более того, их стоит избегать, чтобы избежать других проблем и усложнения простых задач.

Альтернатива, о которой я пишу — это WAI-ARIA (далее ARIA). Это не часть спецификации HTML5, это отдельная спецификация W3C, совместимая с HTML5, HTML4 и XHTML 1. Суть сводится к добавлению атрибута role некоторым элементам.

Сама спецификация очень-очень большая, но нас интересует лишь подраздел, который называется landmarks. Он определяет названия для областей веб-страницы. Вот пример простой веб-страницы с использованием областей ARIA:

<div class="header" role="banner"></div>
<div class="content" role="main"></div>
<div class="sidebar" role="complementary"></div>
<div class="footer" role="contentinfo"></div>

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

При написании статьи использовались материалы с сайта netmagazine.com