Новые структурные элементы в HTML5

Крис Миллз, Брюс Лоусон · 21 декабря 2010 г.

Введение

HTML5 содержит две новые вещи: новые API, которые добавляют существенно важные новые свойства к открытым стандартам модели разработки web, и новые структурные элементы, которые определяют специальные свойства страницы Web со значительно более точной семантикой, чем это было доступно в HTML 4. Статьи, посвященные многим новым API, можно найти на Dev.Opera (http://dev.opera.com/articles/tags/html5/) с меткой HTML5.

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

Введение в структурные элементы HTML5

HTML4 имеет множество семантических элементов, позволяющих четко определять различные свойства страницы Web, такие как формы, списки, параграфы, таблицы и т.д. Однако он имеет и свои недостатки. Существенно используются элементы <div> и <span> с различными атрибутами id и class для определения различных других свойств, таких как навигационные меню, верхние и нижние колонтитулы, основной контент, окна предупреждения, боковые панели, и т.д. Что-нибудь типа <div id="header"> будет понятно разработчикам и дизайнерам, знающим, для чего это предназначено, и умеющих использовать CSS и JavaScript для применения собственных стилей и поведения, чтобы сделать это понятным для конечных пользователей.

Все могло бы быть значительно лучше, но с такими настройками по-прежнему существуют проблемы:

• Люди могут понять разницу между различным контентом, но машины не могут — браузер не видит различные div как верхние и нижние колонтитулы и т.д. Он видит их как различные div. Не будет ли полезнее, если браузеры и считыватели экрана смогут явно идентифицировать, скажем, навигационное меню, чтобы пользователям с недостатками зрения было легче его найти, или различные элементы новостей в пакете блогов, чтобы их было легче объединить в ленту RSS без дополнительного программирования?
• Даже если для решения некоторых из этих проблем используется дополнительный код, вы можете сделать это надежно только для собственных web-сайтов, так как другие разработчики web будут использовать другие имена классов и ID, особенно, если рассмотреть международную аудиторию — различные разработчики web в разных странах будут использовать различные языки для записи имен своих классов и id.

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

• <header>: Используется для верхнего колонтитула сайта.
• <footer>: Используется для нижнего колонтитула сайта.
• <nav>: Содержит навигационные функции страницы.
• <article>: Содержит автономный фрагмент контента, который будет иметь смысл, если используется как позиция RSS, например, новостное сообщение.
• <section>: Используется либо для объединения в группу различных статей с различной целью или по различным темам, или для определения различных разделов одной статьи.
• <time>: Используется для разметки времени и даты.
• <aside>: Определяет блок контента, который связан с основным контентом, но не входит в его основной поток.
• <hgroup>: Используется в качестве оболочки скрытия более одного заголовка, если требуется, чтобы учитывался только один заголовок в структуре заголовков страницы.
• <figure> и <figcaption>: Используется для инкапсуляции рисунка как единого элемента, и содержит, соответственно, подпись для рисунка.

Как были выбраны названия элементов?

Во время создания HTML5 редактор Ян Хиксон использовал инструменты Google для извлечения данных более чем миллиарда web-страниц, определяя, какие имена ID и class использовались наиболее часто в реальной сети web. Можно посмотреть один из подготовленных обзоров, опубликованный на сайте Google Code (http://code.google.com/webstats/2005-12/classes.html). Выражаясь короче, имена элементов, указанные в этой статье, были взяты из 20 наиболее популярных имен ID и class, представленных в обзорах Хиксона.

Примечание: Компания Opera выполнила аналогичное исследование 3.5 миллионов URL, назвав его MAMA. MAMA использует меньшее множество URL, но рассматривает более широкий набор статистики Web-страниц. Дополнительную информацию можно найти на домашней странице проекта MAMA (https://dev.opera.com/tags/mama/).

Почему нет элемента <content>?

Хотя это может казаться кричащим упущением, на самом деле это не так. Основной контент будет блоком верхнего уровня контента, который не является <header>, <nav> или <footer>, и в зависимости от конкретных обстоятельств, может иметь больше смысла пометить контент с помощью <article>, <section>, или даже <div>. Брюс Лоусон называет это "алгоритмом Scooby Doo", но чтобы понять почему, вы должны спросить его самого в Twitter или на конференции.

Представляем пример страницы HTML5

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

Посмотрите на мою страницу A history of Pop Will Eat Itself (http://dev.opera.com/articles/view/new-structural-elements-in-html5/pwei_sample_html5.html) – историю и дискографию одной из моих любимых музыкальных групп 80/90-х (если вам нравится альтернативная музыка, пожалуйста, подтвердите это). Я использовал исходную разметку страницы Wikipedia Pop will Eat Itself (http://en.wikipedia.org/wiki/Pop_Will_Eat_Itself), почистил ее, и превратил в HTML5. Давайте внимательно посмотрим на то, что было сделано.

Держите пример страницы открытым в отдельной вкладке во время чтения статьи – вы можете захотеть вернуться к ней.

Пример использует традиционную проверенную оболочку <div> для размещения контента по центру, но Крок Камен опубликовал интересную статью о создании центрированного дизайна без оболочки <div> (http://camendesign.com/code/developpeurs_sans_frontieres), поэтому я подумал, что покажу ее здесь также. Также полезно порекомендовать не использовать элементы HTML5 <section> в качестве оболочки на страницах HTML5 – это просто совершенно неверно!

Некоторые мета-различия

Первое, что вы заметите, состоит в том, что doctype значительно проще, чем в более старых версиях HTML:

<!DOCTYPE html>

Создатели HTML5 выбрали самую короткую возможную строку doctype для этой цели — в конце концов, почему разработчик должен помнить длинную строку, содержащую множество URL, когда в действительности doctype присутствует здесь только для того, чтобы задать для браузера стандартный режим (в противоположность необычному режиму)?

Затем, я хотел бы привлечь ваше внимание к кажущимся "слабым синтаксическим требованиям" HTML5. Я добавил кавычки вокруг всех значений атрибутов, и написал все элементы строчными буквами, но это, на самом деле, связано с привычкой писать по правилам XHTML. Но для кого-то может показаться удивительным открытие, что в HTML5 можно при желании игнорировать эти правила. Фактически не нужно даже беспокоиться о том, чтобы использовать элементы <head>, <body>, или <html>, все будет по-прежнему допустимо!

Примечание: Это не так, если вы переключаетесь на использование XHTML (HTML работающий с doctype XHTML— application/xhtml+xml )

Дело в том, что такие элементы подразумеваются браузером в любом случае. Если создать пример страницы HTML5 без этих элементов, загрузить ее в браузер и посмотреть исходный код загруженной страницы, то можно заметить, что они будут автоматически вставлены браузером. Иначе можно воспользоваться утилитой-просмотрщиком Яна Хиксона Live DOM (http://software.hixie.ch/utilities/js/live-dom-viewer/), чтобы увидеть состояние DOM.

Примечание: На самом деле можно также отправить на проверку документ HTML4, не содержащий <head>, <body>, или <html>, но это, тем не менее, стоит здесь отметить.

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

Не означает ли это, что нам не нужно больше беспокоиться о проверке правильности и эффективных методах работы? ВОВСЕ НЕТ! Проверка правильности по-прежнему является очень полезным инструментом для создания страниц насколько возможно хорошими. Даже если DOM совместим с браузерами, он по-прежнему может вести себя, прежде всего не так, как требуется, создавая проблемы в CSS и JavaScript! И как вы увидите при дальнейшем изучении HTML5, существуют очень серьезные причины для проверки, что такие свойства документа как <html> объявляются явно. Например, вы можете захотеть объявить язык документа в элементе <html> для интернационализации и улучшения доступности, и это требуют также некоторые связанные технологии. Хорошим примером является AppCache (http://dev.opera.com/articles/view/offline-applications-html5-appcache/).

Для проверки документов HTML5 можно использовать валидатор W3C (http://validator.w3.org/), который может проверять HTML5, а также большой спектр других разновидностей языков разметки. Или использовать специальный валидатор HTML5 (+ WAI-ARIA и MathML) по адресу validator.nu (http://validator.nu/).

В конце этого раздела я хочу привлечь ваше внимание к следующей строке:

<meta charset="utf-8" />

Вам необходимо объявить множество символов документа среди первых 512 байтов, чтобы защититься от серьезной угрозы безопасности. Если нет действительно серьезной причины не делать это, то рекомендуется использовать множество символов UTF-8.

<header>

Верхний колонтитул документа выглядит следующим образом:

<header>
  <hgroup>
    <h1>A history of Pop Will Eat Itself</h1>
    <h2>Introducing the legendary Grebo Gurus!</h2>
  </hgroup>
</header>

Назначение элемента <header> состоит в создании оболочки вокруг раздела контента, который формирует верхний колонтитул страницы, содержащий обычно логотип компании/графику, заголовок основной страницы, и т.д.

<hgroup>

Вы можете заметить, что в приведенном выше коде, единственным контентом колонтитула является элемент <hgroup>, содержащий два заголовка. Я хочу здесь определить заголовок документа верхнего уровня, плюс подзаголовок/ключевую фразу. Мне нужно, чтобы только заголовок верхнего уровня учитывался в иерархии заголовков документа, и именно это делает элемент <hgroup> - он позволяет учитывать группу заголовков как один заголовок в структуре документа. Подробнее о работе иерархии заголовков в HTML5 будет написано ниже в разделе "Разбивка HTML5 и алгоритм заголовков HTML5".

<footer>

Внизу документа можно увидеть следующий код:

<footer>
  <h3 id="copyright">Copyright and attribution</h3>
</footer>

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

Примечание: Не существует ограничения только на один верхний и нижний колонтитул на страницу — страница может содержать несколько статей, и иметь для каждой статьи верхний и нижний колонтитул.

<nav>

Двигаясь дальше по документу, мы встречаемся со следующей структурой:

<nav>
  <h2>Contents</h2>
    <ul>
      <li><a href="#Intro">Introduction</a></li>
      <li><a href="#History">History</a>
      
      <!—другие навигационные ссылки ... -->
      
    </ul>
</nav>

Элемент <nav> предназначен для разметки навигационных ссылок или других конструкций (например, формы поиска), которые направляют вас на различные страницы текущего сайта, или различные области текущей страницы. Другие ссылки, такие как рекламные ссылки, не учитываются. Можно, конечно, включать заголовки и другие структурные элементы внутрь <nav>, но это не обязательно.

<aside>

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

<aside>
  <table>
    <!—- множество кратких фактов в этом месте -->
  </table>
</aside>

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

<figure> и <figcaption>

Динамический дуэт из <figure> и <figcaption> был создан для решения достаточно специального множества проблем. Прежде всего, не казалось ли всегда немного семантически сомнительно и неясно размечать рисунок и его подпись как два параграфа, или как пару списка определений, или как-то иначе? И второе, что делать, когда требуется рисунок, состоящий из изображения, или двух изображений, или двух изображений и некоторого текста? Элемент <figure> хорошо подходит, чтобы объединить весь контент, из которого вы хотите составить один рисунок, будет ли это текст, изображения, SVG, видео, или что-то другое. Элемент <figcaption> затем помещается внутри элемента <figure>, и содержит описательный заголовок для этого рисунка. В мой пример включен простой рисунок, чтобы просто показать, как это используется:

<figure>
  <img src="pwei.png" alt="Old poppies logo" />
  <figcaption>
    The old poppies logo, circa 1987.<br /> <a href="http://www.flickr.com/photos/bobcatrock/317261648/">
     Original picture on Flickr</a>, taken by bobcatrock. 
  </figcaption>
</figure>