HTML5 для веб-дизайнеров

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

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

Перефразируя Уинстона Черчилля, HTML – худшая форма разметки, если не считать всех прочих, что были испробованы человечеством.

Расширяемость

Другие языки разметки позволяют вам изобретать любой элемент, какой пожелаете. В XML, если вы хотите, чтобы в вашем документе был элемент event или price, вы просто берете и создаете его. Недостаток этой свободы заключается в том, что вам нужно будет затем обучить парсер, что значит event и price. Достоинство ограниченного набора элементов HTML в том, что каждая программа, работающая с ним, знает о существовании каждого из этих элементов. В браузеры встроено знание HTML. Это было бы невозможно, если бы нам разрешалось придумывать названия элементов.

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

Если в этом месте вы думаете: «Погодите-ка, разве классы нужны не для CSS?», вы отчасти правы. CSS-селекторы по классам – один из примеров технологии, которая использует атрибут class, но это не единственная причина использовать классы. Классы могут использоваться при написании скриптов для DOM и даже могут использоваться браузерами, если названия классов следуют заранее согласованным правилам, как это происходит в случае микроформатов.

Микроформаты

Микроформаты – набор договоренностей, согласованных внутри сообщества. Эти форматы используют атрибут class для того, чтобы заделать самые зияющие дыры в HTML: hCard – для контактов, hCalendar – для событий, hAtom – для новостных репортажей. Поскольку внутри сообщества существует договоренность о том, какие имена классов следует использовать, существуют парсеры и расширения браузеров, которые работают именно с этими шаблонами.

Микроформаты ограничены по самой своей задумке. Они не пытаются предложить решение для любого возможного сценария использования. Напротив, они нацеливаются на тот плод, что низко висит. Они предлагают решения для 80% сценариев использования, при этом на их создание затрачивается всего 20% усилий. Решить, что считается «плодом, что низко висит», довольно просто: нужно просто посмотреть на содержимое, которое люди уже размечают. Другими словами, заасфальтировать тропинки.

Звучит знакомо? Микроформаты и HTML5 построены на одной философии. По сути, то, как я описал микроформаты – договоренности, согласованные сообществом, – вполне применимо и к HTML5.

Вскипятить океан

То, что микроформаты использовались в качестве модели для разработки HTML5, приходится не всем по вкусу. Хотя правило 80/20 достаточно хорошо работает для сермяжного мира наименований классов, действительно ли оно достаточно хорошо для самого важного языка разметки в мире?

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

Пожалуй, самый красноречивый аргумент такого типа привел Джон Олсоп (John Allsopp) в своей великолепной статье на A List Apart, «Семантика в HTML5» [11]:

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

Уже существуют технологии для того, чтобы делать именно это. RDFa позволяют авторам встраивать в HTML-документы собственные словари. Но в отличие от микроформатов – которые просто используют заранее оговоренный набор наименований классов, – RDFa использует пространства имен для бесконечного разнообразия форматов. Так, там, где микроформат будет использовать примерно такую разметку: h1 class="summary", RDFa будет использовать: h1 property="myformat:summary".