Планы документов (document outlines) немного изменились в HTML5. Для начала, о них действительно сказано в спецификации! HTML5 Доктор объяснит вам, что представляют собой планы документов, как сделать хороший план и почему вы должны об этом беспокоиться.

Что представляют собой планы документов?

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

Алгоритм построения планов четко определен в HTML5 спецификации, так что, как только все браузеры и вспомогательные программы начнут работать с ним, появятся некоторые преимущества доступности (больше про поддержку далее). Прежде чем мы рассмотрим, как этот новый алгоритм работает, давайте освежим воспоминания.

Планы в HTML 4

До появления HTML5 создавать планы документов было достаточно просто. У вас было шесть элементов заголовков – от <h1> до <h6>. Заголовки с меньшим номером получали ранг выше, чем заголовки с высшим номером, например, <h1> считался выше по порядку, чем <h2>:

<h1>Мой фантастический сайт</h1>
<h2>О себе</h2>
<p>Я человек, живущий захватывающей жизнью. Я бы мог рассказать вам много историй...</p>
<h3>Чем я зарабатываю на жизнь</h3>
<p>Я продаю муравьиные фермы</p>
<h2>Контакты</h2>
<p>Выкрикните мое имя, и я приду к вам.</p>

Из этого примера получится такой план:

Заголовки <h2> являются детьми <h1>, а содержимое «О себе» имеет еще один подзаголовок <h3>. Это просто, но ограниченно, так как вам нужно убеждаться, что уровни заголовков подходят для необходимой структуры, а также, вы ограничиваетесь только шестью уровнями. Последнее обычно не составляет проблемы, но все же существует для всех вас, любители заголовков.

В HTML5 аналогично. План вышеприведенного примера будет таким же, но его можно усовершенствовать с помощью секционных элементов.

Секционные элементы

Идея, которая стоит за планами документов в HTML5, на самом деле древнее, чем вы можете себе представить! Тим Бернерс-Ли написал в списке рассылок www-talk в далеком 1991 (аплодисменты доктору Оли, который это раскопал), предлагая нечто довольно близкое к тому, что продемонстрировано в этой статье.

Секционные элементы <section>, <article>, <aside> и <nav> могут помочь создать более логичную структуру в плане документа. Давайте поэкспериментируем и перепишем наш предыдущий пример, используя для заголовков только элемент <h1>:

<h1>Мой фантастический сайт</h1>
<h1>О себе</h1>
<p>Я человек, живущий захватывающей жизнью. Я бы мог рассказать вам много историй...</p>
<h1>Чем я зарабатываю на жизнь</h1>
<p>Я продаю муравьиные фермы</p>
<h1>Контакты</h1>
<p>Выкрикните мое имя, и я приду к вам.</p>

Теперь план будет выглядеть следующим образом:

Несомненно, это нехорошо – мы потеряли нашу структуру! Используя секционные элементы, мы можем вернуть плану прежний вид, не меняя заголовки. Мне кажется, в данном конкретном примере <section> – наиболее подходящий элемент:

<h1>Мой фантастический сайт</h1>
<section>
  <h1>О себе</h1>
  <p>Я человек, живущий захватывающей жизнью. Я бы мог рассказать вам много историй...</p>
    <section>
      <h1>Чем я зарабатываю на жизнь</h1>
      <p>Я продаю муравьиные фермы</p>
    </section>
</section>
<section>
  <h1>Контакты</h1>
  <p>Выкрикните мое имя, и я приду к вам.</p>
</section>

Прогоняем это через генератор планов и опять получаем нормальный план:

Но почему? Секционные элементы действуют буквально так, как вытекает из их названия: они определяют секции родительского элемента. Эти секции можно представить себе как дочерние узлы, заголовки которых находятся под их родительским заголовком, вне зависимости от их ранга. Это проиллюстрировано в следующем примере:

<h2>Статьи HTML5 Doctor</h2>
<article>
  <h1>Элемент <section>О себе</h1>
  <p>Мы, доктора, являемся группой товарищей, которые пользуются HTML 5 и пишут о том,
  как они это делают...</p>
</article>
<article>
  <h1>Элемент <article></h1>
  <p>На сайте HTML5Doctor обсуждалось много новых элементов...</p>
</article>

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

Учитывая то, как работают генераторы планов, из следующих примеров (хоть это и не самые лучшие варианты использования заголовков) получатся точно такие же планы, как выше:

<h1>Статьи HTML5 Doctor</h1>
<article>
  <h3>Элемент <section>О себе</h3>
</article>
<article>
  <h3>Элемент <article></h3>
</article>

<h2>Статьи HTML5 Doctor</h2>
<article>
  <h2>Элемент <section>О себе</h2>
</article>
<article>
  <h2>Элемент <article></h2>
</article>

<h6>Статьи HTML5 Doctor</h6>
<article>
  <h1>Элемент <section>О себе</h1>
</article>
<article>
  <h1>Элемент <article></h1>
</article>

При выборе заголовков для ваших документов вы можете руководствоваться рекомендациями из спецификации:

Секции могут содержать заголовки любого ранга, но авторам настоятельно рекомендуется использовать либо только элементы <h1>, либо элементы с рангом, соответствующим уровню вложенности секции.
Спецификация WHATWG HTML5

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

Первый элемент заголовка в секционном элементе является заголовком этой секции. Последующие заголовки такого же или более высокого ранга вводят новые (неявные) секции. Заголовки более низкого ранга вводят неявные подсекции, которые являются частью предыдущей. В обоих случаях элемент является заголовком неявной секции.
Cпецификация WHATWG HTML5

Безымянные секции

Секционные элементы, которые не содержат дочерний заголовок, будут маркироваться как «Безымянные», указывая на отсутствие логического заголовка, но сохраняя структуру плана, как в примере ниже:

<aside>
  <section>
    <h2>Твиттер</h2>
  </section>
  <section>
    <h2>Последние комментарии</h2>
  </section>
</aside>

Прогоняя это через генератор планов, получаем:

Генератор планов взял на себя смелость обозначить секционный элемент как безымянный, что служит в качестве предупреждения и сохраняет логическую структуру. Для обеспечения доступности мы рекомендуем давать заголовок каждому секционному документу, даже <aside> и <nav>, как показано ниже. Если вы не хотите, чтоб эти заголовки отображались, вы всегда можете скрыть их при помощи CSS.

<aside>
  <h1>Что вы говорите</h1>
  <section>
    <h2>Твиттер</h2>
  </section>
  <section>
    <h2>Последние комментарии</h2>
  </section>
</aside>

Помните, что такие элементы как <section> не должны использоваться без достаточных оснований. Больше об этом вы можете прочитать в статье про <section>.

Как элемент <hgroup> влияет на план?

Как сказал доктор Ричард Кларк в статье про <hgroup>, этот элемент «связан со структурой документа». Генератор планов проигнорирует все заголовки внутри <hgroup>, кроме заголовка с наивысшим рангом. К примеру, если <hgroup> содержит элементы <h2>, <h3> и <h4>, только текст из <h2> будет использован в качестве заголовка секции в плане. Например, из этой разметки:

<article>
  <hgroup>
    <h1>Здесь идет заголовок</h1>
    <h2>Подзаголовок статьи</h2>
  </hgroup>
  <p>Lorem Ipsum dolor set amet</p>
</article>

получится следующий план:

На момент написания этой статьи будущее <hgroup> несколько неопределенное. Недавно он был убран, а потом опять возвращен в HTML5 спецификацию. Есть предложения убрать его или заменить альтернативным элементом. На сайте HTML5 Doctor появится информация о любых изменениях, как только они произойдут.

Секционные корни

Секционные корни, введенные в HTML5, изолируют определенные части документа, которые имеют свои собственные планы. Заголовки внутри этих элементов не появляются в основном плане, где секционным корневым элементом является <body>.

Среди других секционных корневых элементов – <blockquote>, <figure>, <details>, <fieldset> и <td>. Каждый из этих элементов является потомком элемента <body>, но их заголовки не попадают в план высшего уровня, а составляют свой собственный изолированный план.

<h1>Начало плана</h1>
<section>
  <h2>Заголовок в плане</h2>
  <p>Lorem Ipsum dolor set amet...</p>
</section>
<section>
  <h2>Еще один заголовок в плане</h2>
  <p>Lorem Ipsum dolor set amet...</p>
  <blockquote>
    <h1>Этот заголовок цитаты не появится в плане</h1>
    <p>Lorem Ipsum dolor set amet...</p>
  </blockquote>
</section>

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

Планы в реальном мире

К сожалению, на данный момент поддержка новых алгоритмов создания планов документов слабая. Поисковики могут экспериментировать с этим, как вы здесь прочитали, но, насколько нам известно, заголовки рассматриваются так же, как и прежде. Вас никто не накажет за их использование, даже, если вы многократно используете элементы <h1> (что всегда считалось нормальным согласно спецификации). Ознакомьтесь со статьей «HTML5 и поисковая оптимизация«, чтоб узнать больше о поисковиках и HTML5.

На момент написания статьи, речевые браузеры для слепых не поддерживали эти новые планы, так что, если вы действительно многократно используете элементы <h1> в ваших документах, это может сбить с толку ваших читателей. Лучше всего использовать логические уровни заголовков – <h1> – <h6>, хотя бы до тех пор, пока новые планы не будут поддерживаться более широко.

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

Заключительные мысли

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

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

Инструменты создания планов документов

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

• h50, реализация генератора планов на Javascript, доступная в виде букмарклета, расширения или сжатого JavaScript-файла
• расширение для Opera
• онлайн генератор планов, в который вы можете загрузить файл или добавить URL или HTML-источник для анализа (разработка уже должна была закончиться)

Источник:  css-live.ru