Microdata HTML5

HTML5 microdata — это стандартизированный способ обеспечить дополнительную семантику в веб-страницах.

HTML5 microdata позволяет определять произвольные элементы и начать вложение пользовательских свойств в веб-страницы. HTML5 microdata состоит из пар группы имя-значение.

Группы называются  items , и каждая пара значений является  property . Продукты и свойства представлены в регулярных элементах.

Пример HTML5 microdata:

  • Чтобы создать объект, используется атрибут itemscope .
  • Для добавления свойства к элементу,  атрибут itemprop используется на одном из дочернем элементе.

Здесь есть два элемента, каждый из которых имеет свойство «name»:



<div itemscope>
<p> Меня зовут <span itemprop="name"> Гера </ span>. </ p>
</ div>

<div itemscope>
 <p> Меня зовут <span itemprop="name"> Муха </ span>. </ p>
</ div>


Свойства как правило, имеют значения, которые являются строками, но они могут иметь следующие типы данных:

Глобальные атрибуты HTML5 microdata:

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

Атрибут Описание
itemscope Используется для создания объекта.  Атрибут Itemscope логический атрибут, который указывает что на этой странице Microdata.
ItemType Атрибут является допустимым URL определяет объект и обеспечивает условия для его свойства.
Itemid Атрибут является глобальным идентификатором для данного элемента.
itemprop Атрибут определяет свойство элемента.
itemref Атрибут содержит список дополнительных элементов, чтобы найти пары имя-значение элемента.

Свойства тип данных:

Свойства как правило, имеют значения, которые являются строками, как указано в примере выше, но они также могут иметь значения, URL-адреса. Следуя примеру свойства «image»  которое имеет значение  itemprop и является адресом:



<div itemscope>
 <img itemprop="image" src=
http://pixelcom.crimea.ua/"tp-logo.gif" alt="TutorialsPoint">
</div>
<p>


Свойства также могут иметь значения, даты, времени или даты и времени. Это достигается с помощью  time  элемента и его атрибут datetime .



<div itemscope>
  Мой день рождения:
  <time itemprop="birthday" datetime="1971-05-08">
  5 августа 1971
  </ time>
  </ div>


Свойства могут быть и сами группы со значением  itemscope , которые заявляет о собственности.

Поддержка API Microdata:

Если браузер поддерживает HTML5 Microdata API, функция GetItems() будет на глобальном объекте документа. Если браузер не поддерживает microdata, функция GetItems() нужно определить.



function supports_microdata_api() {
  return !!document.getItems;
}


Modernizr не поддерживает проверку microdata API, так что вам придется использовать функцию, как показано выше.

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

Вы можете включать в разметку веб-страниц microdata, а поисковые системы, которые не понимают атрибуты HTML5 microdata будут просто игнорировать их. Но если вы хотите получить доступ или управлять microdata через DOM, вам необходимо проверить, поддерживает ли браузер microdata DOM API.

Словарь определении microdata:

Чтобы определить лексику HTML5 microdata нужного пространства имен URL , которые указывают на веб-страницы. Например http://data-vocabulary.org/Person могут быть использованы в качестве имен для личного словаря HTML5 microdata со следующим свойством имён:

  • name  — имя лица в виде простой строки.
  • photo  — URL к изображению пользователя.
  • URL  — веб-сайт, принадлежащих этому пользователю.

Использование свойств пользователя HTML5 microdata может быть следующей:



<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Андрей Пупкин</h1>
<p>
<img itemprop="photo" src=
http://pixelcom.crimea.ua/"http://www.example.com/photo.jpg">
</p>
<a itemprop="url" href=
http://pixelcom.crimea.ua/"http://www.example.com/blog">Мой блог</a>
</section>
<p>


Google поддерживает microdata как часть их программы. Когда Google анализирует вашу страницу и находит свойства HTML5 microdata, которые соответствуют http://data-vocabulary.org/Person, он анализирует те свойства и сохраняет их вместе с остальной страницей данных.

Вы можете посмотреть пример, который был выше с использованием  Rich Snippets инструмент тестирования.

Информацию для дальнейшего развития HTML5 microdata вы всегда можете найти на странице HTML5 Micordata

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>