Pull to refresh

HTML 5: Microdata

Website development *
Translation
Original author: The WHATWG Contributors
image
HTML 5 продолжает удивлять нас своими возможностями. Вот еще одна.

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

Допустим, вы работаете с трекером инцедентов типа Bugzilla, и вам нужны дополнительные инструменты для получения информации об инцедентах из базы данных.
Сейчас, Bugzilla создает XML-файл на каждую ошибку, а это означает, что для страницы с ошибкой формируется два параллельных формата данных. Вместо того, чтобы осуществлять такое разделение, вы можете использовать microdata — новые атрибуты HTML5. Таким образом, при отслеживании изменений интерфейса от версии к версии, основные данные об ошибках отображены на этой же HTML-странице.
Разметка выглядит сейчас так:
<body>
<h1>Issue 12941: Too many pies in the pie factory</h1>
<dl>
 <dt>Reporter</dt>
 <dd>ian@hixie.ch</dd>
 <dt>Priority</dt>
 <dd>AAA</dd>
 ...

Для пояснения работы с microdata, мы создаем некоторые атрибуты, а затем присваиваем каждому полю с этими атрибутами значение. Это атрибуты в «reverse-DNS» форме; если существует ошибка на «example.net», то атрибуты будут «net.example.bug», «net.example.number», и так далее. Таким образом, мы получаем:
<body item="net.example.bug">
<h1>Issue <span itemprop="net.example.number">12941</span>:
 <span itemprop="net.example.title">Too many pies in the pie factory</span></h1>
<dl>
 <dt>Reporter</dt>
 <dd itemprop="net.example.reporter">ian@hixie.ch</dd>
 <dt>Priority</dt>
 <dd itemprop="net.example.priority">AAA</dd>
 ...

Атрибут item = «net.example.bug» указывает: «это ошибка». Различные атрибуты itemprop формируют пару имя/значение для ошибки. Фрагмент выше является результатом следующего дерева данных:
net.example.bug:
 net.example.number = "12941"
 net.example.title = "Too many pies in the pie factory"
 net.example.reporter = "ian@hixie.ch"
 net.example.priority = "AAA"


Теперь в случае кардинального изменения страницы, теже данные об ошибках однозначно доступны:
<body>
<h1>Example.Net Bugs Database</h1>
<section item="net.example.bug">
 <h1 itemprop="net.example.title">Too many pies in the pie factory</span></h1>
 <p>#<span itemprop="net.example.number">12941</span>; reported
 by <span itemprop="net.example.reporter">ian@hixie.ch</span>.</p>
 <p>PRIORITY: <strong itemprop="net.example.priority">AAA</strong>.</p>
 ...

На этом заканчивается краткое введение в microdata! Некоторые будущие статьи опишут несколько аспектов microdata, что я не обсуждал здесь:
• Как описывать URL, дату и время, скрытые данные с использованием microdata.
• Как один элемент сделать внутри другого.
• Как описывать объект более чем одного типа или о том, как дать единое значение для нескольких атрибутов.
• Как определять заранее словари.
• Как добавлять описание вне item = "", используя subject = "".

Дополнительно:

Microdata Extractor for HTML 5
Microdata Specification
* This source code was highlighted with Source Code Highlighter.
Особая благодарность XaocCPS за некоторую корректировку перевода.
Tags:
Hubs:
Total votes 51: ↑46 and ↓5 +41
Views 9.7K
Comments Comments 58