Подборка полезных публикаций для веб-мастеров и заказчиков

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

Derek Johnson | habr.com

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

Вступление

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

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

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

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

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

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

  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: Как может быть структурирована страница о лошадях на продажу.

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

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

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

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

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

 
                 

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

   

Кобылы

   

Pink Diva

   

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

   

Ring a Rosies

   

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

   

Chelsea’s Fancy

   

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

   

Жеребцы

   

Korah’s Fury

   

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

   

Sea Pioneer

   

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

   

Brown Biscuit

   

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

   

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

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

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

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

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

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

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

 

Sea Pioneer

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

Brown Biscuit

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

 

Chelsea’s Fancy

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

Stallions

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

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

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

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

Кобылы

               

Pink Diva

         

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

                      
Ring a Rosies
         

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

                      

Chelsea’s Fancy

         

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

                    
Жеребцы
               

Korah’s Fury

         

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

                      

Sea Pioneer

         

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

                      

Brown Biscuit

         

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

                        

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

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

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

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

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

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

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

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

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

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

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

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

 
      

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

               

Кобылы

                     

Pink Diva

            

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

                               

Ring a Rosies

            

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

                               

Chelsea’s Fancy

            

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

                                

Жеребцы

                     

Korah’s Fury

            

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

                               

Sea Pioneer

            

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

                               

Brown Biscuit

            

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

                                  

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

   

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

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

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

Смешивание

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

 

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

         

Кобылы

      

Pink Diva

      

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

      

Ring a Rosies

      

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

      

Chelsea’s Fancy

      

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

   

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

  1. Horses for sale

    1. Mares

      1. Pink Diva

      2. Ring a Rosies

      3. Chelsea’s Fancy

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

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

 

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

   

Кобылы

         

Pink Diva

      

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

             

Ring a Rosies

      

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

             

Chelsea’s Fancy

      

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

   

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

  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:

 
   

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

         

Кобылы

             

Жеребцы

   

Пример 9: Безымянная

   

      

Blog post title

      

Blog post content

   

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

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

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

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

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

HGROUP

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

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

В заключение

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

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

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

сохранить ссылку