Модель данных микроданных

Определить свой словарь микроданных просто. Прежде всего, требуется пространство имен, собственно URL. URL на пространство имен — это просто указатель на рабочую веб страницу, хотя это не обязательно. Скажем мне нужно создать словарь для описания человека. Если я владею доменом data-vocabulary, я могу использовать адрес как пространство имен для моего словаря.

В этом словаре мне нужно задать имена свойствам. Начну с трех основных:

• name (полное имя пользователя);
• photo (ссылка на фото пользователя);
• url (ссылка на сайт связанный с пользователем, такой как блог или аккаунт на facebook).

Два из этих свойств — URL, и одно — обычный текст. Каждое из этих свойств представлено в виде обычной разметки. Представь, что у тебя есть страница профайла или страница «обо мне». Твое имя скорей всего размечено как заголовок, например, тег < h1>. Твое фото, скорей всего — это тег <img>, для того, чтобы люди смогли увидеть, как ты выглядишь. А URL на ресурс связанный с тобой — это скорей всего гирперссылка, т.к. ты хочешь, чтобы люди смогли по ней кликнуть. Ну и заключим весь блок профиля в элемент <section>, чтобы отделить его от остального содержимого страницы. Вот как это выглядит:

<section>
	<h1>Mark Pilgrim</h1>
	<p>
		<img src="" alt="[me smiling]">
	</p>
	<p>
		<a href="">weblog</a>
	</p>
</section>

Модель данных микроданных — это пары имя/значение. Имена свойств микроданных (в нашем примере это name, photo, url) всегда основываются на HTML тегах. Соответствующие значения свойств берутся из DOM элементов. Для большинства HTML тегов значение свойства — это содержимое тега (текст). Но есть и несколько исключений, о которых говориться в следующей таблице:

«Добавление микроданных» к своей странице заключается в добавлении нескольких атрибутов HTML элементам. Первое, что нужно будет сделать — это определить какой словарь будет использоваться. Для этого добавляем атрибут itemtype. Второе, что нужно сделать — определить границы действия словаря — для этого понадобится атрибут itemscope. В нашем примере, все данные, которые мы хотим семантизировать заключены в элемент <section>, поэтому атрибуты itemtype и itemscope добавляем этому элементу:

<section itemscope itemtype="">

Твое имя — это первый бит данных, содержащихся в <section>. К тому же имя заключено в <h1>. Элемент <h1> не требует специальной обработки, поэтому попадает под категорию «Все остальные элементы» из вышеприведенной таблицы. А это значит, что значение свойства — это просто текст, содержащийся внутри элемента (аналогичная ситуация будет с тегами <p>, <div> или <span>):

<h1 itemprop="name">Mark Pilgrim</h1>

Это можно «расшифровать» так: «Это свойство name словаря. Значение свойства — Mark Pilgrim».

Следующим идет свойство photo. Это должен быть URL. Согласно таблице значение элемента <img> содержится в атрибуте src. Выходит, что URL на фото в профиле уже содержится в элементе <img src>. Все, что нужно сделать — это объявить, что элемент <img> — это свойство photo.

<p><img itemprop="photo" src="" alt="[me smiling]"></p>

Читаем так: «Это свойство photo словаря. Значение свойства —.

И, наконец, свойство url — так же является URL'ем. Согласно таблице значение элемента <a> — это атрибут href. Это отлично вписывается в текущую разметку. Нужно только сообщить, что элемент <a> — это значение свойства url:

<a itemprop="url" href="">dive into mark</a>

Читаем так: «Это свойство url словаря. Значение свойства — ».

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

<TABLE>
<TR><TD>Name<TD>Mark Pilgrim
<TR><TD>Link<TD><A href=# onclick=goExternalLink()>>
</TABLE>

Чтобы обозначить свойство name, просто добавляем атрибут itemprop для ячейки таблицы, которая содержит имя. Табличные ячейки не имеют специальных правил для значений свойств микроданных. Поэтому значение — это текст в ячейке:

<TR><TD>Name<TD itemprop="name">Mark Pilgrim

Добавление свойства url выглядит сложнее. Эта разметка использует тег <a> неправильно: атрибут href, который должен содержать адрес, не содержит ничего полезного. Но при этом привязан обработчик события onclick, который извлекает адрес из текста ссылки и осуществляет переход страницы на этот адрес. Чтобы стало совсем интересно, представим, что по клику на ссылке будет открываться попап окно без прокрутки. Весело было в Веб в прошлом веке?

В любом случае весь этот «ужас» все еще можно привести к свойствам микроданных, нужно только подойти к делу более творчески. Об использовании напрямую элемента <a> не может быть речи. В href нет нужного значения и нет возможности обойти правило, которое гласит, что значение тега <a> нужно искать в атрибуте href. Но можно добавить обрамляющий контейнер и уже ему добавить свойство url:

<TABLE itemscope itemtype="">
	<TR><TD>Name<TD>Mark Pilgrim
	<TR><TD>Link<TD>
		<span itemprop="url">
			<A href=# onclick=goExternalLink()>>
		</span>
</TABLE>

Поскольку элемент <span> не имеет специальной обработки, он придерживается правила: «значение свойств микроданных находится в тексте элемента». При нашей разметке текст у <span> будет тот же, что и у вложенного <a> — .

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

Куда дальше

• следующая — Разметка «люди»
• предыдущая — Что такое микроданные?
• содержание