HTML5 и алгоритм разметки документов

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

Вступление

Все мы уже  знаем, что для создания веб-сайтов лучше всего использовать HTML5. Сейчас мы обсудим то, как правильно использовать HTML5. Одной из важных частей HTML5, которую до сих пор не все понимают, является разделение содержимого на разделы: section, article, aside и nav. Чтобы понять разделение содержимого, нам нужно понять алгоритм разметки документа. 

Понимание алгоритма структурирования документа может оказаться непростой задачей, но оно того стоит. Вы больше не будете ломать голову над тем, какой элемент использовать - section или div - вы будете знать это сразу. Более того, вы будете знать, почему эти элементы используются, и именно знание их значения является самым большим достоинством изучения алгоритма.

Дальнейшее чтение на SmashingMag:

• Важность элементов разметки HTML5

• Кодирование макета HTML 5 с нуля

• Наша бессмысленная гонка за значимостью семантики

Что такое алгоритм структурирования документов?

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

Итак, давайте начнем с примера схемы. Представьте, что вы создали сайт для конезаводчика, и ему нужна страница для рекламы лошадей, которых он продает. Структура страницы может выглядеть примерно так:

1. Лошади на продажу

   1. Кобылы

      1. Pink Diva

      2. Ring a Rosies

      3. Chelsea’s Fancy

   2. Жеребцы

      1. Korah’s Fury

      2. Sea Pioneer

      3. Brown Biscuit

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

Вот и все: красивый, чистый, легко читаемый список заголовков, отображаемый в иерархии - подобно оглавлению.

Если говорить еще проще, то только две вещи в вашей разметке влияют на внешний вид веб-страницы:

• содержимое заголовков (от h1 до h6 и hgroup),

• разделение содержимого на секции (section, article, aside и nav).

Очевидно, что секционирование содержимого - это новый способ HTML5 для создания разметки. Но прежде чем перейти к этому, давайте вернемся к HTML 101 и рассмотрим, как мы должны использовать заголовки.

Создание разметки с использованием заголовков

Чтобы создать структуру для страницы лошадей, показанной на примере 1, мы могли бы использовать разметку, подобную следующей:

			
<div>             

   <h1>Лошади на продажу</h1>

   <h2>Кобылы</h2>

   <h3>Pink Diva</h3>

   <p>Pink Diva родила трех победителей Grand National.</p>

   <h3>Ring a Rosies</h3>

   <p>Ring a Rosies трижды выигрывала Дерби.</p>

   <h3>Chelsea’s Fancy</h3>

   <p>Chelsea’s Fancy родила трех обладателей Золотого кубка.</p>

   <h2>Жеребцы</h2>

   <h3>Korah’s Fury</h3>

   <p>Korah’s Fury стал отцом трех чемпионских скаковых лошадей.</p>

   <h3>Sea Pioneer</h3>

   <p>Sea Pioneer трижды выигрывал "The Oaks".</p>

   <h3>Brown Biscuit</h3>

   <p>Brown Biscuit не стал отцом никого примечательного.</p>

   <p>Все наши лошади поставляются с полным пакетом документов и родословной.</p>

</div>
			
		

Пример 2: Наша страница "Лошади на продажу", размеченная с помощью заголовков.

Все очень просто. Контур на примере 1 создан уровнями заголовков.

Чтобы вы знали, что я не выдумываю, скопируйте и вставьте приведенный выше код в превосходный инструмент Джеффри Снеддона для создания схем. Нажмите большую кнопку "Outline this", и вуаля!

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

Неявный раздел завершается заголовком того же уровня или выше. В нашем примере раздел "Кобылы" заканчивается началом раздела "Жеребцы", а каждый раздел, содержащий подробную информацию об отдельной лошади, заканчивается началом следующего.

Пример 3 ниже - пример неявного раздела, который заканчивается заголовком того же уровня. А пример 4 - неявный раздел, который заканчивается заголовком более высокого уровня.

		
<h3>Sea Pioneer</h3><!-- начало неявного раздела -->

<p>Sea Pioneer трижды выигрывал "The Oaks".</p>

<h3>Brown Biscuit</h3><!-- Этот заголовок начинает новый неявный раздел,

поэтому предыдущий, -  "Sea Pioneer" закрывается -->
		
		

Пример 3: Неявный раздел закрывается заголовком того же уровня

		
<h3>Chelsea’s Fancy</h3><!-- начало неявного раздела -->

<p>Chelsea’s  родила трех обладателей Золотого кубка.</p>

<h2>Stallions</h2><!-- с этого заголовка начинается новый неявный раздел

используя заголовок более высокого уровня, так что "Chelsea`s Fancy" теперь закрыт -->
		
		

Пример 4: Неявный раздел закрывается заголовком более высокого уровня.

Создание схемы с помощью разделения содержимого

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

		
<div>

   <h6>Лошади на продажу</h6>

   <section>

      <h1>Кобылы</h1>

      <article>

         <h1>Pink Diva</h1>

         <p>Pink Diva родила трех победителей Grand National.</p>

      </article>

      <article>

         <h5>Ring a Rosies</h5>

         <p>Ring a Rosies трижды выигрывала Дерби.</p>

      </article>

      <article>

         <h2>Chelsea’s Fancy</h2>

         <p>Chelsea’s Fancy родила трех обладателей Золотого кубка.</p>

      </article>

   </section>

   <section>

      <h6>Жеребцы</h6>

      <article>

         <h3>Korah’s Fury</h3>

         <p>Korah’s Fury стал отцом трех чемпионских скаковых лошадей.</p>

      </article>

      <article>

         <h3>Sea Pioneer</h3>

         <p>Sea Pioneer трижды выигрывал "The Oaks".</p>

      </article>

      <article>

         <h1>Brown Biscuit</h1>

         <p>Brown Biscuit не стал отцом никого примечательного.</p>

      </article>          

   </section>

   <p>Все наши лошади поставляются с полным пакетом документов и родословной.</p>

</div>
		
		

Пример 5: Страница лошадей, размеченная с помощью новых структурных элементов HTML5.

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

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

Элементы section, article, aside и nav - вот что создает схему, и на этот раз разделы называются явными разделами.

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

В той части спецификации HTML5, которая посвящена заголовкам и разделам, это четко указано:

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

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

Это означает, что пользовательские агенты, которые не реализовали алгоритм разметки, могут использовать неявное разделение, а те, которые его реализовали, могут эффективно игнорировать уровни заголовков и использовать секционирование содержимого для создания схемы.

На момент написания этой статьи ни один браузер или программа для чтения не реализовали алгоритм выделения контуров, поэтому нам нужны сторонние инструменты тестирования, такие как аутлайнер. Последние версии Chrome и Firefox по-разному стилизуют элементы h1 во вложенных разделах, но это очень отличается от реальной реализации алгоритма.

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

		
<div>

      <h1>Лошади на продажу</h1>

      <section>

         <h2>Кобылы</h2>

         <article>

            <h3>Pink Diva</h3>

            <p>Pink Diva родила трех победителей Grand National.</p>

         </article>

         <article>

            <h3>Ring a Rosies</h3>

            <p>Ring a Rosies трижды выигрывала Дерби.</p>

         </article>

         <article>

            <h3>Chelsea’s Fancy</h3>

            <p>Chelsea’s родила трех обладателей Золотого кубка.</p>

         </article>

      </section>

      <section>

         <h2>Жеребцы</h2>

         <article>

            <h3>Korah’s Fury</h3>

            <p>Korah’s Fury стал отцом трех чемпионских скаковых лошадей.</p>

         </article>

         <article>

            <h3>Sea Pioneer</h3>

            <p>Sea Pioneer трижды выигрывал "The Oaks".</p>

         </article>

         <article>

            <h3>Brown Biscuit</h3>

            <p>Brown Biscuit не стал отцом никого примечательного.</p>

         </article>           

      </section>

      <p>Все наши лошади поставляются с полным пакетом документов и родословной.</p>

   </div>
		
		

Пример 6: Страница наших лошадей с разумной разметкой.

Еще один момент, на который стоит обратить внимание, - это положение абзаца "Все наши лошади поставляются с полным пакетом документов и родословной". В примере, где для создания схемы использовались заголовки (прим. 2), этот абзац является частью неявного раздела, созданного заголовком "Brown Biscuit". Читатели ясно увидят, что этот текст относится ко всему документу, а не только к Brown Biscuit.

Секционирование контента решает эту проблему довольно легко, перемещая его обратно на верхний уровень, возглавляемый заголовком "Лошади на продажу".

Смешивание

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

		
<h1>Лошади на продажу</h1>

   <section>

      <h2>Кобылы</h2>

      <h3>Pink Diva</h3>

      <p>Pink Diva родила трех победителей Grand National.</p>

      <h3>Ring a Rosies</h3>

      <p>Ring a Rosies трижды выигрывала Дерби.</p>

      <h3>Chelsea’s Fancy</h3>

      <p>Chelsea’s  родила трех обладателей Золотого кубка.</p>

   </section>
		
		

И это создает разумную иерархическую схему:

1. Horses for sale

   1. Mares

      1. Pink Diva

      2. Ring a Rosies

      3. Chelsea’s Fancy

Пример 7: Скрытые разделы, созданные заголовками внутри явного раздела.

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

		
<h1>Лошади на продажу</h1>

   <h2>Кобылы</h2>

   <article>

      <h3>Pink Diva</h3>

      <p>Pink Diva родила трех победителей Grand National.</p>

   </article>

   <article>

      <h3>Ring a Rosies</h3>

      <p>Ring a Rosies трижды выигрывала Дерби.</p>

   </article>

   <article>

      <h3>Chelsea’s Fancy</h3>

      <p>Chelsea’s Fancy родила трех обладателей Золотого кубка.</p>

   </article>
		
		

В результате получится следующая схема:

1. Horses for sale

   1. Mares

   2. Pink Diva

   3. Ring a Rosies

   4. Chelsea’s Fancy

Пример 8: Явные секции не могут находиться внутри скрытых секций.

Не существует способа заставить явные разделы, созданные элементами article, стать подразделами неявного раздела Mare.

Вы можете использовать заголовки для разделения содержимого элементов секционирования, но не наоборот.

На что следует обратить внимание

Разделы без названия

До сих пор мы не рассматривали nav и aside, но они работают точно так же, как section и article. Если у вас есть второстепенный контент, который в целом связан с вашим сайтом - скажем, советы по дрессировке лошадей и новости отрасли - вы пометите его как "в сторону", что создаст явный раздел в схеме документа. Аналогично, основная навигация должна быть обозначена как nav, что также создает явный раздел.

Нет требования использовать заголовки для aside и nav, поэтому они могут появиться в конспекте как разделы без названия. Попробуйте использовать следующий код в программе outliner:

		
<nav>

      <ul>

         <li><a href="/">home</a></li>

         <li><a href="/about.html">about us</a></li>

         <li><a href="/лошади.html">horses for sale</a></li>

       </ul>

   </nav>

   <h1>Лошади на продажу</h1>

   <section>

      <h2>Кобылы</h2>

   </section>

   <section>

      <h2>Жеребцы</h2>

   </section>
		
		

Пример 9: Безымянная <nav>.

nav  отображается как раздел без названия. Как правило, это не является проблемой и не считается плохим кодом HTML5, хотя в своей недавней статье HTML5 Doctor об изложении Майк Робинсон рекомендует использовать заголовки для всех разделов контента, чтобы повысить доступность.

Элементы section и article без названия, с другой стороны, обычно следует избегать. На самом деле, если вы не уверены, стоит ли использовать section или article, хорошее правило - посмотреть, есть ли у контента естественный, логичный заголовок. Если нет, то, скорее всего, лучше использовать старый добрый div.

На самом деле, спецификация не требует, чтобы элементы section имели заголовок. Она гласит:

Элемент section представляет собой общий раздел документа или приложения. В данном контексте раздел - это тематическая группировка содержимого, обычно с заголовком.

Ваша интерпретация этого, вероятно, зависит от вашего понимания слова "обычно". Я понимаю это как то, что вам нужна чертовски веская причина не использовать заголовки с section элементами. Я не считаю, что это означает, что вы можете игнорировать его всякий раз, когда вам захочется использовать новый элемент HTML5.

Там, где указан элемент article, спецификация идет еще дальше, показывая пример комментариев в блогах, помеченных как article без заголовка, так что исключения есть. Однако если вы видите в схеме section или article без названия, убедитесь, что у вас есть веская причина не давать им название.

Если вы не уверены, является ли ваш раздел без названия nav, aside, section или article, очень удобное расширение Opera позволит вам узнать, какой тип содержимого раздела вы оставили без названия. Этот инструмент также позволит вам просмотреть схему, не покидая страницу, что может быть очень полезно при отладке разделов.

Корень секционирования

Самые зоркие из вас заметили, что когда я сказал, что содержимое раздела не может создавать подсекцию скрытого раздела, в содержимом раздела не было h1 ("Лошади на продажу"), за которым сразу следовал section ("Кобылы"), и содержимое раздела действительно создавало подсекцию h1.

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

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

Элемент body является корнем секционирования. Таким образом, если вы вставите код с примера 7 в outliner, h1 будет корневым заголовком секционирования, а элемент section будет подразделом корневого элемента секционирования body.

Элемент body - не единственный, который действует как корень секционирования. Есть еще пять других:

1. blockquote

2. details

3. fieldset

4. figure

5. td

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

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

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

Попробуйте следующий код в outliner, чтобы посмотреть, что произойдет:

		
<section>

   <h1>this is an h1</h1>

</section>

<h6>this h6 comes first in the source</h6>

<h1>this h1 comes last in the source</h1>
		
		

Пример 10: Как уровни заголовков на корневом уровне влияют на схему.

Я не буду пытаться объяснить вам это, потому что это, вероятно, только запутает нас обоих, поэтому я позволю вам поиграть с этим в аутлайнере. Подсказка: попробуйте использовать разные уровни заголовков для неявных разделов, чтобы посмотреть, как это повлияет на контур; например, h3 и h4 или два h5.

Неназванные документы

Если ни один заголовок не находится на корневом уровне документа (т.е. не внутри секционирующего содержимого), то сам документ будет без заголовка. Это довольно серьезная проблема, и она может возникнуть либо из-за небрежности, либо, как это ни парадоксально, из-за тщательного продумывания того, как следует использовать содержимое секций.

Роджер Йоханссон рассматривает этот вопрос в своей замечательной статье о схемах документов и HTML5, а также в последующей статье.

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

		
<body>

	<article>

		<h1>Blog post title</h1>

		<p>Blog post content</p>

	</article>

</body>
		
		

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

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

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

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

Помните, что вы все еще можете использовать div!

HGROUP

Это последний пункт в списке того, чего следует остерегаться, и его очень легко понять. Элемент hgroup может содержать только заголовки (от h1 до h6), и его назначение - удалить из схемы все заголовки, кроме самого высокоуровневого, который он содержит.

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

В заключение

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

Но если вы запомните основы - что section, article, aside и nav создают подразделы на веб-страницах, - то вы уже на 90 % на правильном  пути. Привыкайте размечать контент с помощью элементов секционирования и проверять свои страницы в аутлайнере, потому что чем больше вы будете практиковаться в создании хорошо оформленных документов, тем быстрее вы поймете алгоритм.

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