Web Development Tips

My Twitter account, WebDevTips, has been reactivated. Follow @webDevTips to get (almost) daily Web Development tips in your timeline.


Microdata

Microdata let you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. Microdata uses the new to HTML5 attributes of itemscope, itemprop, itemref and itemtype. The itemscope attribute is used create an item. The itemprop attribute is used to add a property to an item. If an itemprop has associated properties that are not descendants of that itemprop, you can associate those properties with that itemprop by using the itemref attribute: the entity that has the itemscope attribute also accepts the itemref attribute that takes as it’s value a space separated list of id’s of entities that should be crawled in addition to the itemprop’s descendants.

Microdata is most useful when it is used in contexts where other authors and readers are able to cooperate to make new uses of the markup. You can create your own types of microdata markup marked up on a page that doesn’t expect its microdata to be re-used. Use the itemtype attribute to provide a URI. There doesn’t need to be anything at that URI, but all of the itemscopes of the same itemtype should reference the same URI. It is most useful, however, to not create your own vocabulary if one exists for a similar purpose. There are several microdata vocabularies that have been standardized that coincide with Microformat conventions.

Microformats are very similar to microdata. In fact, microdata can be viewed as an extension of the existing microformat idea that attempts to address the deficiencies of microformats without the complexity of systems such as RDFa. Instead of using the new itemscope, itemprop, itemtype, etc. attributes, Microformats repurpose the class attribute to provide human and machine readable semantic meaning to data, microdata

Microformats are standardized sets of vocabularies that are both human and machine-readable. They are web page conventions used to describe common information types including events, reviews, address book information and calendar events. Each entity, such as a person, event or business, has its own properties, such as name, address and phone number.

In general, microformats use the class attribute in opening HTML tags (often <span> or <div>) to assign brief, descriptive names to entities and their properties. Unlike Microdata, Microformats are NOT part of the HTML5 specification.

Here’s an example of a short HTML block showing my contact information for me.

<ul>
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl "/></li>
<li><a href="http://www.standardista.com">Estelle Weyl</a></li>
<li>1234 Main Street<br />
San Francisco, CA 94114</li>
<li>415.555.1212</li>
</ul>

Here is the same HTML marked up with the hCard (person) microformat.

<ul id="hcard-Estelle-Weyl" class="vcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a class="url fn" href="http://www.standardista.com">Estelle Weyl</a></li>
<li class="adr">
<span class="street-address">1234 Main Street</span>
<span class="locality">San Francisco</span>, <span class="region">CA</span>, <span class="postal-code">94114</span> <span class="country-name hidden">USA</span>
</li>
<li class="tel">415.555.1212</li>
</ul>

In the first line, class="vcard" indicates that the HTML enclosed in the <ul> describes a person: in this case, me. The microformat used to describe people is called hCard but is referred to in HTML as vcard. While confusing, it isn’t a typo.

The rest of the example describes properties of the person, including a photo, name, address, URL and phone, with each property having a class attribute describing the property. For example, fn describes my full name.
Properties can contain other properties. In the example above, the property adr encompasses all components of my fake address including street-address, locality, region and postal-code. With a little CSS we can hide the ‘hidden’ class and add a line break between street-address and locality. To create your own hcard, visit http://microformats.org/code/hcard/creator

The same content could be written with microdata:

<ul id="hcard-Estelle-Weyl" itemscope itemtype="http://microformats.org/profile/hcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a href="http://www.standardista.com" itemprop="fn">Estelle Weyl</a></li>
<li itemprop="adr">
<span itemprop="street-address">1234 Main Street</span>
<span itemprop="locality">San Francisco</span>, <span itemprop="region">CA</span>, <span itemprop="postal-code">94114</span> <span class="hidden" itemprop="country-name">USA</span>
</li>
<li itemprop="tel">415.555.1212</li>
</ul>

Or you can combine the two:

<ul id="hcard-Estelle-Weyl" class="vcard" itemscope itemtype="http://microformats.org/profile/hcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a class="url fn" href="http://www.standardista.com" itemprop="fn">Estelle Weyl</a></li>
<li class="adr" itemprop="adr">
<span class="street-address" itemprop="street-address">1234 Main Street</span>
<span class="locality" itemprop="locality">San Francisco</span>, <span class="region" itemprop="region">CA</span>, <span class="postal-code" itemprop="postal-code">94114</span> <span class="country-name hidden" itemprop="country-name">USA</span>
</li>
<li class="tel" itemprop="tel">415.555.1212</li>
</ul>

http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata provides information about microdata.

Search engines will not display content that is not visible to the user. Providing search engines with more detailed information, even if you don’t want that information to be seen by visitors to your page, can be helpful. Event time in ISO data format helps ensure that events are placed in the right time sequence and correctly placed in calendars. Providing geo coordinates of latitude and longitude can help ensure correct mapping. Providing semantics around reviews provides Google with added meta data that it can use to better display your search results leading to a higher click thru rate.

To enable the web to be a single global database, being able to parse the available data into meaningful data points is required. Microdata and microformats help make otherwise non-descript data meaningful to parsers.