Microdata & the microdata DOM API

Introduction

One of the problems that HTML5 was addressing was to increase the consistency (and, therefore, machine readability) of markup, as evidenced by the introduction of standard semantic elements such as <header>, <nav> and <figure>. This is all well and good, but sometimes there is a need to add certain machine-readable attributes for content elements, so that they can be predictably used in any script, even if the markup used for different content differs. This need is already met, to a certain extent, with simple and backward compatible Microformats , and with the help of more esoteric RDFa .

In this regard, it is not surprising that a solution to this problem was added to the HTML5 specification as a microdata specification (hereinafter Microdata), which includes a set of attributes that can be added to any element and an associated DOM API for processing / aggregating microdata into page.

')
Microdata is trying to improve what we already had in the past: to provide a built-in mechanism that is as easy to understand as microformats, and which allows you to process data without having to write your own parser. Of course, you can create your own Microdata parser to support browsers without native support for Microdata DOM API, using JavaScript , if necessary. In this article we will walk through the HTML attributes of Microdata and the syntax of the DOM API.

: Opera Microdata .


HTML syntax

Microdata consists of a set of elements, each of which has a set of properties represented by key-value pairs. Actually, like real web geeks, let's describe ourselves in microdata format. You can write your own example, in my sample.

: Microdata HTML5-. Microdata , .

First of all, we can mark any suitable item as a container of items using the itemscope attribute

 <article itemscope> </article> 

Obviously, you must select the element that contains the data you need, and it does not matter what data you mark. In this case, I will mark the biography card: the first property will be our name, and we will mark it using the itemprop attribute:

 <article itemscope> <h2 itemprop="name">Chris Mills</h2> </article> 

The itemprop attribute selects an element containing data. The value of the attribute is the name of the property, and the content of the element is the value of the property. Let's add some more properties to make sure you get the gist:

 <article itemscope> <h2 itemprop="name">Chris Mills</h2> <ul> <li>Nationality: <span itemprop="nationality">British</span></li> <li>Age: <span itemprop="age">33</span></li> <li>Hair colour: <span itemprop="colour">Brown</span></li> </ul> </article> 

In some cases, the value of the property is not the text content of the element, but the value of some attribute of the same element. For example:

1. For the <media> tag, the property value is the value of the “src” attribute.
2. For the <a> tag, the value of the “href” attribute.
3. For the <time> tag, the “datetime” attribute value.

(Note of the translator: the values ​​of other elements can be viewed in the specification )

On the other hand, if the property value is a URL, then it must be expressed through the corresponding element that points to or loads an external resource, for example, through the <a> element. If the property value is a date or time (or both), then the property should be expressed through the <time> element and the "datetime" attribute. The itemprop attribute is added in the same way, but the property value will be the attribute value, instead of the text content of the element.

A few examples:

 <article itemscope> <h2 itemprop="name">Chris Mills</h2> <p><img itemprop="image" src="Chris-Mills.png" alt="Photo of Chris Mills - this is me"></p> <ul> <li>Nationality: <span itemprop="nationality">British</span></li> <li>Age: <span itemprop="age">33</span></li> <li>Date of birth: <time itemprop="birthday" datetime="1978-06-27">June 27th 1978</time></li> <li>Hair colour: <span itemprop="colour">Brown</span></li> </ul> </article> 

: (10 2011), <data>, .


Microdata nested nodes

You can also quietly embed Microdata elements (Interpreter Note: hereinafter, so as not to get confused in terms: “Microdata nodes”) inside each other. The topmost Microdata node is marked with the itemscope attribute, and then any nested Microdata nodes are also marked with the itemscope attribute. Let's add some information about your group to the biography card:

 <article itemscope itemtype="http://example.org/biography"> ... <li> <div itemscope itemprop="band"> <h3>My band</h3> <ul> <li>Name: <span itemprop="name">Conquest of Steel</span></li> <li>Band: <span itemprop="style">Heavy metal</span></li> <li>Members: <span itemprop="size">5</span></li> </ul> </div> </li> ... </article> 

Different properties, one name; one property, different names

You can specify the same property name for several elements, for example:

 <li>Members: <ul> <li itemprop="member">Claymore Clark</li> <li itemprop="member">DD Danger</li> <li itemprop="member">Dan Durrant</li> <li itemprop="member">Chris Mills</li> <li itemprop="member">Vic Victory</li> </ul> </li> 

The result will be a Microdata node with five properties, all with the name “memeber” and each with its own value.

Conversely, you can also put several properties in one element, thereby giving these properties the same value:

 <li>Band: <span itemprop="style favouritemusic">Heavy metal</span></li> 

Pointing to properties outside the itemscope element

There may be times when you want your Microdata nodes to include properties that are not actually defined within this item. You can do this by referring to external property IDs inside the itemref attribute. Consider the following example, in which I moved members of my group outside of my element, to a separate place in the html markup:

 <article> ... <li> <div itemscope itemprop="band" itemref="members"> <h3>My band</h3> <ul> <li>Name: <span itemprop="name">Conquest of Steel</span></li> <li>Band: <span itemprop="style">Heavy metal</span></li> <li>Members: <span itemprop="bandsize">5</span></li> </ul> </div> </li> </ul> </article> <ul id="members"> <li itemprop="member">Claymore Clark</li> <li itemprop="member">DD Danger</li> <li itemprop="member">Dan Durrant</li> <li itemprop="member">Chris Mills</li> <li itemprop="member">Vic Victory</li> </ul> 

In this case, the “member” properties are inside the element with the identifier that is referred to by the itemref attribute of our Microdata item.

: ID itemref . : itemref="members instruments gigdates"

Definition of a property dictionary for Microdata nodes that can be used later

All is well, as long as you use your Microdata markup yourself - you yourself define a set of properties for your Microdata nodes. But, when collaborating with other web developers, it becomes necessary to define a property dictionary for a particular Microdata node. You can do this by specifying the type of each node using the itemtype attribute. The value of this attribute is in the form of a URL, the resource to which the given URL refers may or may not exist. Well, if you specify the URL to the real page on the Internet, which informs other users about the property dictionary, but you are not obliged to do so.

Let's return to our example:

 <article itemscope itemtype="http://example.org/biography"> ... <div itemscope itemprop="band" itemtype="http://example.org/band" itemref="members"> ... </div> ... </article> 

A Microdata node can have only one type, and a type defines a property dictionary. Thus, in our example, an element of type example.org/biography has four properties - name, style, bandsize and member. This helps to avoid confusion with the same name properties. You can also use Microdata to mark up information about a jury in court, with the same property itemprop = "member", but this will be a different property because Microdata has another itemtype - “ example.org/jury ”, or any other of your choice.

You need to think carefully about which property dictionary you will use to choose a reliable, flexible, and expandable one: For more information and tips, read the section Selecting Names when defining dictionaries . You should also search the web, maybe someone has already written a suitable dictionary for your purposes. See the Microdata dictionaries specification section for information on existing dictionaries transferred from microformats, such as vCard and vEvent.

Assigning a global identifier for the Midrodata node

Some items already have an identifier assigned by identifying settlement agreement, such as ISBNs for books and UPCs for products in the store. Some Microdata dictionaries support such identifiers (you have to figure out such questions yourself, which is why we recommend documenting them at the URL specified in the itemtype attribute when writing your own property dictionaries). If you use similar identifiers, specify it in the itemid attribute in the same element where you specified the itemscope and itemtype . A crawler or a search engine that understands similar markup (as long as there are no such) will understand that your content is the same ISBN / UPC object, like any other content with which itemid . Then they will be able to smoothly accumulate information until the network gains consciousness and the machines rise.

For example, the following markup will be processed, provided only that the example.com/book dictionary explicitly indicates to use an ISBN identifier (more details on this later):

 <article itemscope itemtype="http://example.com/book" itemid="urn:isbn:978-0321703521"> <h2 itemprop="title">InterACT with web standards</h2> <p>Authors:</p> <ul> <li itemprop="author">Leslie Jensen-Inman</li> <li itemprop="author">Chris Mills</li> <li itemprop="author">Glenda Sims</li> <li itemprop="author">Aarron Walter</li> ... 

Microdata DOM API

Microdata becomes even more useful when you start using its DOM API to manipulate nodes and their properties on a page using javascript, perhaps to present information in a search manner or to deliver it to some other application.

The API is very simple - you use the document.getItems () function to get a Nodelist object containing all Microdata nodes on a page (Note: only all top -level nodes, that is, not nested into other nodes and not having an itemprop attribute). If you call a function with no arguments, you will get a list of all Microdata nodes; or, you can specify which itemtype you are looking for by passing it as a call parameter, in which case the function will return a Nodelist only with Microdata nodes where itemtype is equal to your parameter. For example:

 var biography = document.getItems("http://example.org/biography"); 

Return the biographical node and save it to a variable. After getting the node, you can manipulate its properties through the properties property:

 var biography = document.getItems("http://example.org/biography")[0]; alert('Hi there ' + biography.properties['name'][0].textContent + '!'); 

And in this there is nothing difficult, seriously. You can find more examples for study in the Using the microdata DOM API section of the specification. In addition, Philip Jägenstedt created a rather elegant live microdata viewer , which is very useful for checking your code, and can also be used to quickly convert Microdata to various formats, such as JSON.

Microdata. , Opera Microdata, W3C

Our microdata review is complete. I hope this helped you understand this new interesting technology. Let us know what you think and check out our experimental Opera build with microdata support .

From the translator:
The article has lain on Dev.Opera since August and no one has translated it. Because The article is worthy of attention and will be interesting to a large number of developers, I took it upon myself to correct this injustice. I do not have any good knowledge of the English language or experience in translation, so if you find an inaccuracy in the translation, write to me in PM. If you think that the article is worthy of any other blog - also, write to me in a personal