В HTML5 свыше 100 элементов. Некоторые из них довольно семантичны, другие же просто являются контейнерами для рисования. На протяжении всей истории HTML зубрилы стандартов спорят о том, какие элементы должны быть включены в язык. Должен ли HTML включать элемент <figure>? А элемент <person>? Как насчёт элемента <rant>? Решения принимаются, спецификации пишутся, авторы создают, разработчики разрабатывают, и веб пошатываясь движется вперёд.
Конечно, HTML не может угодить всем. Но стандарт может. Некоторые идеи не идут с ним вразрез. Например, в HTML5 нет элемента <person> (нет также элемента <rant>, чёрт побери!). При этом ничего не мешает вам включить элемент <person> на страницу, но это не будет валидно и не будет работать корректно в разных браузерах. К тому же может возникнуть конфликт с будущими спецификациями HTML, если мы хотим добавить этот элемент позже.
Итак, если создание собственных элементов не решение, что делать авторам склонным к семантике? Были попытки расширить предыдущие версии HTML. Наиболее популярным методом являются микроформаты, которые используют атрибуты class и rel в HTML4. Другим вариантом является RDFa, который первоначально был предназначен для использования в XHTML, но в настоящее время также перенесён в HTML.
Микроформаты и RDFa имеют свои сильные и слабые стороны. Они содержат принципиально разные подходы с одной целью: расширение веб-страницы дополнительной семантикой, которая не является частью основного языка HTML. Я не намерен превратить эту главу в битву форматов (этого, несомненно, требует элемент <rant>). Вместо этого я хочу сосредоточиться на третьем варианте, который является частью HTML5 и тесно интегрирован с ним — микроданные.
Что за микроданные?
Каждое слово в следующем предложении имеет важное значение, так что будьте внимательны.
Профессор Разметкин говорит
Микроданные комментируют DOM в области видимости пары имя/значение из пользовательских словарей.
Как это теперь понимать? Давайте начнём разбирать от конца к началу. Микроданные крутятся вокруг пользовательских словарей. Подумайте о «множестве всех элементов HTML5» как об одном словаре. Этот словарь включает в себя элементы для представления раздела или статьи, но он не включает в себя элементы для представления человека или события. Если вы хотите описать человека на веб-странице, вам нужно определить свой собственный словарь. Микроданные позволяют сделать это. Кто угодно может определить словарь микроданных и начать добавление пользовательских свойств на собственные веб-страницы.
Следующее, что нужно знать о микроданных это то, что они работают с парой имя/значение. Каждый словарь микроданных определяет набор именованных свойств. Например, словарь Person может определить такие свойства как имя и фотография. Чтобы вставить специфическое свойство микроданных на веб-страницу, вы определяете имя свойства в специальном месте. В зависимости от того, где вы объявляете имя свойства, микроданные содержат правила о том, как извлечь значение свойства. Подробнее об этом в следующем разделе.
Наряду с именем свойства, микроданные в значительной мере опирается на концепцию «области видимости». Простейший способ понять область действия микроданных, это подумать об отношениях элементов вида родитель-ребенок в DOM. Элемент <html> обычно состоит из двух детей, <head> и <body>. Элемент <body> обычно содержит несколько детей, каждый из которых может иметь свои собственные дочерние элементы. Например, страница может включать элемент <h1> внутри <hgroup>, который располагается внутри <header> внутри <body>. Таблица может содержать <td> внутри <tr> внутри <table> (в пределах <body>). Микроданные повторно используют иерархическую структуру DOM, чтобы обеспечить себе способ сказать «все свойства внутри этого элемента взяты из этого словаря». Это позволяет использовать больше, чем один словарь микроданных на одной странице. Вы можете даже вкладывать один словарь внутрь других словарей опять же путём повторного использования исходной структуры DOM. Я покажу несколько примеров вложенных словарей в этой главе.
Раз я уже затронул DOM, позвольте на нём остановиться. Микроданные применяют дополнительную семантику для данных, которые уже видны на вашей веб-странице. Микроданные не задуманы как отдельный формат данных, они лишь являются дополнением к HTML. Как вы увидите в следующем разделе, микроданные работает лучше при использовании корректного HTML, но сам HTML-словарь недостаточно выразителен. Микроданные отлично подходят для тонкой настройки семантики данных, которые уже есть в DOM. Если «семантизируемых» данных нет в DOM, вы должны сделать шаг назад и решить снова, являются ли микроданные верным решением.
Стало ли предложение «Микроданные комментируют DOM в области видимости пары имя/значение из пользовательских словарей» более понятным? Я надеюсь на это. Давайте посмотрим на это всё в действии.
Модель микроданных
Определить свой собственный словарь микроданных довольно просто. Вначале вам нужно пространство имён, это всего-навсего URL. Этот URL действительно может вести на рабочую веб-страницу, хотя это и не обязательно. Допустим, я хочу создать словарь микроданных, который описывает человека. Если я владею доменом data-vocabulary.org, то буду использовать URL http://data-vocabulary.org/Person как пространство имён для моего словаря микроданных. Это простой способ создать глобальный уникальный идентификатор: выберите URL в домене, которым вы управляете.
В этом словаре мне нужно определить некоторые именные свойства. Давайте начнём с трёх основных свойств:
- name (ваше полное имя);
- photo (ссылка на ваше изображение);
- url (ссылка на сайт связанный с вами, вроде блога или профиля Google).
Некоторые из этих свойств являются URL, другие же обычным текстом. Каждое из них поддается естественной форме разметки ещё до того, как вы начнёте думать о микроданных, словарях или о чём-то ещё. Представьте, что у вас есть страница профиля или страница «обо мне». Ваше имя, вероятно, задано в качестве заголовка как элемент <h1>. Ваша фотография, вероятно, как элемент <img>, так как вы хотите, чтобы люди увидели её. И любой URL связанный с вашим профилем, вероятно, размечен как ссылка, потому что вы хотите чтобы люди могли перейти по ней. Для обсуждения скажу, что весь профиль также обёрнут в элемент <section>, чтобы отделить его от остального содержимого страницы. Таким образом.
Всё обо мне
<section>
<h1>Марк Пилгрим</h1>
<p><img src="http://www.example.com/photo.jpg" alt="[я улыбаюсь]"></p>
<p><a href="http://diveintomark.org/">блог</a></p>
</section>
Модель микроданных основана на паре имя/значение. Имя свойства (вроде имени человека, его фото или URL в данном примере) всегда объявляется в элементе HTML. Соответствующее значение свойства затем взято из элемента DOM. Для большинства элементов HTML значение свойства это просто текстовое содержимое элемента, но есть несколько исключений.
Откуда берётся значение свойств микроданных?
| Элемент |
Значение |
| <meta> |
Атрибут content |
| <audio>
<embed>
<iframe>
<img>
<source>
<video> |
Атрибут src |
| <a> <area> <link> |
Атрибут href |
| <object> |
Атрибут data |
| <time> |
Атрибут datetime |
| Все остальные элементы |
Текстовое содержимое |
«Добавление микроданных» на вашу страницу состоит в добавлении нескольких атрибутов в уже имеющиеся HTML-элементы. Первое, что вы всегда должны сделать, это объявить, какой словарь микроданных вы используете, путём добавления атрибута itemtype. Второе, что вы всегда должны сделать, это объявить область словаря используя атрибут itemscope. В этом примере все данные, которые мы хотим семантизировать, находятся в элементе <section>, поэтому объявим атрибуты itemtype и itemscope для элемента <section>.
<section itemscope itemtype="http://data-vocabulary.org/Person">
Ваше имя это первый кусочек данных в элементе <section>. Оно обёрнуто элементом <h1>. Элемент <h1> не имеет специальной обработки в модели микроданных HTML5, поэтому он подпадает под правило «все остальные элементы», где значением свойства микроданных выступает текстовое содержимое элемента. Это будет так же хорошо работать, если бы ваше имя было обёрнуто в элемент <p>, <div> или <span>.
<h1 itemprop="name">Марк Пилгрим</h1>
Говоря простым языком: «Словарь свойства name находится здесь: http://data-vocabulary.org/Person, а значением свойства выступает Марк Пилгрим».
Далее идёт свойство photo. Это должен быть URL. В соответствии с моделью микроданных HTML5, «значением» элемента <img> выступает атрибут src. Эй, смотри, URL фотографии твоего профиля уже в атрибуте src. Всё, что вам нужно сделать, объявить о том, что элемент <img> — это свойство photo.
<p><img itemprop="photo"
src="http://www.example.com/photo.jpg"
alt="[я улыбаюсь]"></p>
Говоря простым языком: «Словарь свойства photo находится здесь: http://data-vocabulary.org/Person, а значением свойства является http://www.example.com/photo.jpg».
И наконец, свойство url это тоже URL. В соответствии с моделью микроданных HTML5, «значением» элемента <a> является атрибут href. И опять же это прекрасно вписывается в существующую разметку. Всё, что вам нужно сделать, это сказать, что существующий элемент <a> принадлежит свойству url:
<a itemprop="url" href="http://diveintomark.org/">мой сайт</a>
Говоря простым языком: «Словарь свойства url находится здесь: http://data-vocabulary.org/Person, а значением свойства выступает http://diveintomark.org/.
Конечно, если ваша разметка выглядит несколько иначе, то это не проблема. Вы можете добавить свойства и значения микроданных в любую HTML-разметку, даже очень упрямую табличную вёрстку XX века (о боже, почему я согласился на это). Хотя я не рекомендую такую разметку, она всё ещё широко распространена и вы всё равно можете добавить к ней микроданные.
Ради бога, не делайте так
<TABLE>
<TR><TD>Имя<TD>Марк Пилгрим
<TR><TD>Ссылка<TD>
<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</TABLE>
Для указания свойства name просто добавьте атрибут itemprop к ячейке таблицы, которая содержит имя. Ячейки не имеют специальных правил в таблице значений свойств микроданных, таким образом они получают значение по умолчанию: «свойством микроданных является текстовое содержимое».
<TR><TD>Имя<TD itemprop="name">Марк Пилгрим
Добавление свойства url выглядит сложнее. Данная разметка неверно использует элемент <a>. Вместо того, чтобы включить ссылку в атрибут href, ничего полезного в этом атрибуте не добавлено и в атрибуте onclick применяется JavaScript для вызова функции goExternalLink (её содержимое здесь не показано), которая извлекает URL и переходит к нему. Ради дополнительных бонусных баллов в рейтинге «пожалуйста, хватит так делать» давайте представим, что функция открывает ссылку в небольшом всплывающем окне без полос прокрутки. Разве Интернет прошлого века не смешон?
В любом случае, вы можете преобразовать этот код в микроданные, вам просто нужно проявить немного творчества. О непосредственном использовании элемента <a> не может быть и речи. Адреса ссылки нет в атрибуте href и нет никакого способа, чтобы изменить правило, которое говорит «внутри элемент <a> смотри значение свойства микроданных в атрибуте href». Но вы можете добавить контейнер вокруг этого беспорядка и использовать его для добавления свойства микроданных url.
Вот что вы получите за разрушение HTML
<TABLE itemscope itemtype="http://data-vocabulary.org/Person">
<TR><TD>Имя<TD>Марк Пилгрим
<TR><TD>Ссылка<TD>
<span itemprop="url">
<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</span>
</TABLE>
Так как элемент <span> не имеет специальной обработки, то используется правило по умолчанию «свойством микроданных выступает текстовое содержимое». В данном случае «текстовое содержимое» не означает «вся разметка внутри этого элемента» (как это могло получиться, скажем, со свойством DOM innerHTML). Оно означает «только текст, сэр». В этом случае, текстовым содержимым элемента <a> внутри элемента <span> является http://diveintomark.org/.
Подведём итог: вы можете вставить свойства микроданных в любую разметку. Если вы используете HTML правильно, то заметите, что добавить микроданные легче, чем при отвратительной HTML-разметке, но это всегда можно поправить.