HTML 5: Microdata

Original author: The WHATWG Contributors
  • Translation
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 за некоторую корректировку перевода.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 58

    +8
    После вступления в силу HTML5 верстальщики уже будут не верстальщики. Сколько всего нового. Ууу. А работа с формами, где элементы могут размножаться — это же не для средних умов.

    Да — за статью спасибо. В сообществе любителей семантического web'а был шумок, что работа над RDF прекратиться вместе с XHTML2 и они кинули взгляд с надежной именно на microdata.
      +3
      После вступления в силу HTML5 верстальщики уже будут не верстальщики… это же не для средних умов

      Откуда такое мнение, что верстальщик должен быть тупой?
        +1
        Я не имел ввиду, что верстальщик должен быть тупой.
        Просто то что будет делать верстальщик, когда на дворе будет HTML5 и то что он делает сейчас — совершенно разные вещи. Там поболее кваификации и способностей понадобиться!
          –3
          Верстальщик знающий только HTML/CSS и не стремящийся знать больше — тупой самодостаточный идиот. Таких нужно стерилизовать, чтобы следующее поколение верстальщиков было умственно-полноценным.
            +3
            Верстальщик ДЕЙСТВИТЕЛЬНО знающий HTML/CSS- это большая находка между прочим :) Вы что-нибудь о трудностях кросс-браузерной верстки слышали? Кодерам, работающим с серверными языками на порядок проще, интерпритаторы на серверах идентичные (плюс-минус минорная разница в версиях)
              +1
              Кодер, не стремящийся стать програмистом — тупой идиот. Это еще хуже тупого верстальщика
                –1
                Пробежался по хабру, обнаружил традиционный плач по ie и решил еще раз написать.
                1. На сегодняшний день проблемы кроссброузерной верстки нет. Есть 20-30 хаков для ie6. За 10 лет его существования они все изучены и описаны и пережеваны до жидкого состояния. Если верстальщик вместо того чтобы выучить все эти баги и способы их обхода ноет — он тупой идиот, стоящий на низшей ступени профессионального развития.
                2. На сегодняшний день верстальщик знающий только CSS и HTML может работать только на самой низкооплачиваемой работе (так же как и кодер, умеющий только кодить), при условии что он ее найдет, потому что в большинстве вакансий от верстальщика требуются дополнительные знания типа XSLT, JS или какой-нибудь фигню типа Joomla. Если верстальщик не стремится выскочить с самой низшей ступеньки и выучить что-то за пределами своих непосредственных обязанностей он точно так же не будет учить новые стандарты, будет тупо верстать таблицами лэйоуты и впиливать теги FONT.
                Это проверено на личном опыте, в бытность ведущим верстальщиком в двух совершенно разных конторах.
        0
        вообще, нововведение классное, целиком поддерживаю
        эдакая смесь html-разметки и xml-данных
          +1
          Лично я уже давно постоянно использую подобные вещи (нестандартные атрибуты) — для более удобной организации интерфейсов с помощью JS.
            –1
            Вообще-то для таких целей в jquery приспособлен плагин metadata. Упаковывает в атрибут class данные в формате json. Это тоже извращение, но оно почему-то мало кого раздражает.
              +1
              Впервые слышу о таком плагине. Но если он и вправду работает так, как вы говорите — то это действительно извращение: ведь тогда как составить селектор для нужных элементов?
                0
                Либо через атрибут класса, либо через нецелевое использование существующих атрибутов типа title, rel либо никак. В HTML5 паллиативное решение, которое в корне проблему не устраняет. В покойном xHTML2 это решалась через RDF. Но увы. Холивар о нестандартных атрибутах жил, жив и будет жить.
          0
          похоже на rdf
            0
            получается типа rdf-a… надеюсь будет отображение из этого микроформата в rdf
            0
            жду не дождусь хтмл5
              0
              Он уже пришел!
              0
              Хорошо, как описывать — понятно. А как с этим работать?
                –1
                думаю как только станет чем-то осязаемым, поддержка сразу же появится во всех js-фреймворках, типа jQuery
                  0
                  в библиотеках jquery тут и там используют нестандартные атрибуты, а для json-данные пихают в сlass.
                  И похоже, что HTML5 эту практику никак не изведет.
                +2
                Это и микроформаты — разные вещи?
                  +1
                  Этим, можно дополнить микроформаты.
                  Если прочитать: www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#vcard то все станет понятно. Там даже дан очень хороший пример использования:

                  <address item=vcard>
                   <strong title="fn">Alfred Person</strong> 
                   <span itemprop="adr" item>
                    <span itemprop="street-address">1600 Amphitheatre Parkway</span> 
                    <span itemprop="street-address">Building 43, Second Floor</span> 
                    <span itemprop="locality">Mountain View</span>,
                    <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span>
                   </span>
                  </address>
                  
                    +2
                    На первый взгляд, кажется что это не дополнение к микроформатам, а скорее стандартизированная замена, т.е. задача у них по-сути одна и та жа.
                    0
                    Микроформаты — разновидность микроданных, насколько я понимаю.
                    Т.е. микродата — расширение описательной части HTML за счет использования стандартизированных значений атрибутов, а микроформаты — конкретные примеры — hCard, vcard и т.д.
                      0
                      Суть то в принципе одна и та же- облегчить за счет стандартизации разметки машинную обработку содержимого этой разметки.
                      +2
                      Разница между микроформатами и микроданными состоит в том, что микроформаты предполагают разметку данных специальными значениями атрибутов классов (class="...") или отношений (rel="..."), при этом данные могут быть частью обычного текста или обычной гиперсвязи; микроданные же вместо классов или отношений используют собственные атрибуты (item, itemprop), невиданные доселе.

                      Микроданными поэтому труднее пользоваться на таких многопользовательских сайтах, которые используют белые списки таких атрибутов HTML, которыми дозволено воспользоваться пользователю. Например, можно себе представить, как во блогозаписях на некотором коллективном блогохостинге разрешается атрибут class="..." (rel="..."), но не микроданные.
                      0
                      Очень хорошее и грамотное нововведение, которые давно ждали многие))
                        0
                        Да, только пунктуация осталась англоязычной и «инцедент» пишется «инцидент». Рунет пока что живёт дословными переводами чужих материалов…
                        –3
                        Кто-то изобрёл XML. С учётом существования XHTML5 мне это кажется довольно бесполезным.
                          +1
                          Нет XHTML5, есть XHTML и есть HTML5. Последний является сужением первого под более конкретные требования современного Web-а.
                            +1
                              0
                              Ну в общем-то вы правы, XHTML5 существует, но как привычная дописка «X» к HTML5 для желающих во что бы то ни стало отдавать страницы как application/xhtml+xml или application/xml. Реплика относилась к непонятному сравнению XML (общий описательный язык чего угодно) и HTML5 (язык с описаниями популярных нынче сущностей в Web).
                              www.whatwg.org/specs/web-apps/current-work/#html-vs-xhtml
                              dev.w3.org/html5/html4-differences/#syntax
                              Лично я за strict XML.
                                +1
                                XHTML5 существует как XML описание HTML5.
                                То есть:
                                <body ex:item="bug" xmlns:ex="http://example.net">
                                <h1>Issue <span ex:prop="number">12941</span>:
                                <span ex:prop="title">Too many pies in the pie factory</span></h1>
                                является валидным XHTML5.

                                То есть непонятно зачем нужен itemprop, если есть xml namespaces.
                                  0
                                  То есть по-вашему лучше так?
                                  <ex:body item=«bug» xmlns:ex=«example.net»>
                                  Issue <ex:span prop=«number»>12941:
                                  <ex:span prop=«title»>Too many pies in the pie factory</ex:span>
                                  </ex:body>
                                  Возможно, то тогда body и span перестают быть частью HTML-спецификации (т.е. не рассматриваются более как тело и его строчный кусок соответственно) и становятся незнакомыми парсеру браузера. Соответственно, придача смысла атрибутам item и prop перекладывается на обработчик, стоящий за логическим именем «example.net».
                                  Если же пространство имён оставить только у атрибутов, то этой проблемы не будет, заодно и обратная совместимость с текущей спецификацией HTML4 сохраняется.
                                    0
                                    То есть по-вашему лучше так?

                                    Вовсе нет, по моему лучше так, как я написал. Мысли про спецификацию правильные, но не относятся к моему примеру.
                                  • UFO just landed and posted this here
                                      0
                                      blog.ashmind.com/index.php/2007/06/03/xhtml-and-microformats-revisited/
                                      И это касается тегов, аттрибуты с неймспейсом работают в любых браузерах и сейчас.
                                      Я использовал bind:href=«expression» для небольшого databinding-движка, например.
                                      • UFO just landed and posted this here
                                          +1
                                          > Формально-то по стандарту XHTML с другими неймспейсами отдавать как text/html, насколько я в курсе, нельзя.

                                          там ничего такого не сказано. там лишь сказано, что префиксы не будут обработаны как неймспейсы и останутся частью имени тэга.

                                          > JS не все ладно

                                          ой, ну это мелочи. на фоне остальных-то неладностей…

                                          > Опера 9.6, к примеру, справедливо считает это HTMLUnknownElement-ом и не дает навесить на него элементарный onclick

                                          это баг оперы. совершенно не критичный в свете разделения поведения и вёрстки
                                            –2
                                            Рыцарь, печального образа мыслей. Когда вас НЛО почикает, не забудьте зафрендиться в новой реинкарнации. Пожалуйста.
                                              +1
                                              думаешь уже скоро? ^^
                                              а то я и так прыгаю и эдак, а оно всё пролетает мимо и не замечает T_T
                                                0
                                                Подозреваю, что автоматом подчищаются те кто в топе.
                                            • UFO just landed and posted this here
                                          0
                                          Чтобы не читать весь пост, самое главное:
                                          Firefox, IE7 and Opera 9 all could render the custom tags style correctly in the document served as text/html.

                                          IE7 has a one important characteristic — it does not render custom tag styles unless…


                                          Понятно что в случае с аттрибутами стилизация не важна.
                                • UFO just landed and posted this here
                                    0
                                    annevankesteren.nl/2008/04/html5-foreign
                                    по сути дела SVG и MathML в HTML5 — это hardcoded hack, который обходит невозможность полного синтаксиса XML.
                                  0
                                  <i:bug xmlns:i=«urn:net:example:bugs»>
                                  <h1><i:title>Too many pies in the pie factory</i:title></h1>
                                  <p>#<i:number>12941</i:number>; reported by <i:reporter>ian@hixie.ch</i:reporter>.</p>
                                  <p>PRIORITY: <i:priority>AAA</i:priority>.</p>
                                  </i:bug>

                                  почувствуйте разницу…
                                    0
                                    Ждём браузеров с полной поддержкой html 5. А то как-то даже обидно)
                                      0
                                      Как может быть полная поддержка стандарта, которого нет? М.б. там в w3c через год перегрызутся как с video и замутят HTML6
                                      • UFO just landed and posted this here
                                          +1
                                          В этом борделе есть все:
                                          стандарты w3c, которые никто не соблюдает
                                          стандарты де-факто, которые соблюдают все, но игноририрует w3c
                                          черновики w3c, которые соблюдаются как черновики,
                                          какая-то синтетическая хрень, не имеющая отношения к w3c, но тюнинг под которую — дело чести производителей броузеров.

                                          Я таки всегда придерживался мнения — если бы MS десять лет назад не пошла на поводу W3c, порядка было бы больше.
                                          • UFO just landed and posted this here
                                              0
                                              Мой английский очень плохой, но мне кажется вы перевели неверно. Автор предлагает не «использовать, то что есть», а хавать что дают.
                                              Есть то много чего — XLink, xForms, xPath, xSLT… И ведь что обидно — частично в отдельных броузерах или кроссброузерных js-библиотеках это реализовано.
                                      0
                                      Допустим, вы работаете с трекером инцедентов типа Bugzilla

                                      Первый раз слышу, чтобы баг-трекер так называли :)
                                        0
                                        да придет html5!
                                          0
                                          Согласен с aps. По сути дела определит развитие HTML5+, т.к. грядет эра медиа в интернет.
                                            0
                                            тег video (был хабром скушан):

                                            Согласен с aps. По сути дела video-тег определит развитие HTML5+, т.к. грядет эра медиа в интернет.
                                            0
                                            Какой-то пример использования невразумительный (без обид). В чем смысл и приимущества нововедения-то?

                                            Улучшить (или усилить? :) семантику? — Но тогда же должен быть еще и стандарт, что можно прописывать в itemprop, а-ля DTD или XML-Scheme.
                                            Хранить данные в узлах на подобии метода data в jquery?

                                            Можно еще какие-нибудь примеры, для тех кто пока в HTML5 не «нырнул»?
                                              0
                                              Что-то с чем-то :(

                                              Only users with full accounts can post comments. Log in, please.