- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
From the Rough Cut
From the Rough Cut
From the Rough Cut
Intermediate Recipe: Adding more semantic information with Microdata
The Microdata specification allows authors to add labels to pieces of content so that they are machine-readable. Using the Microdata formatting means we can give context to our content which in theory will help 'machines' like Google return more accurate information about our pages.
We can treat Microdata like it is a custom element, so we can create Microdata for things like a business, a person, products, or an event. Because there is no <book> element, we can apply Microdata attributes to our existing elements.
There are five new attributes: itemid, itemprop, itemref, itemscope, and itemtype. A basic example is in Listing 2.14 which is describing a person.
Listing 2.14
<article itemscope itemtype="http://data-vocabulary.org/Person"> <h1 itemprop="name">Tom Leadbetter</h1> <p span itemprop="address" itemscope itemtype="http://data-vocabulary.org/ Address">I live in <span itemprop="region">Liverpool</span>, <span itemprop="country-name">UK</span>.</p> <p>I am a <span itemprop="title">Space Cowboy</span> at <span itemprop="affiliation">Space Cowboy Inc.</span>. I also have a website: <a href="http://www.tomleadbetter.co.uk" itemprop="url">tomleadbetter.co.uk</a></p> </article>
Using the code in Listing XX basically says that we have an personwhose name is Tom Leadbetter, that person lives in the UK and is a Space Cowboy working for Space Cowboy Inc.
With itemscope used on an element, the element is now a Microdata item. itemprop is a property of this Microdata item to describe what the content is. The example has two itemscope attributes used, one for the overall piece of content (Person) and another for the Address itemtype within.
The itemprop values in the example come from data-vocabulary.org which suggests the names for various data types (events, products, etc). You can make your own up if you want but for consistent results you should check that you are using standard, recognized names. Google also has examples and suggestions at google.com/support/webmasters/bin/answer.py?answer=99170. Using the Google webmaster Rich Snippets Testing Tool, we can check our Microdata to see how Google might render it in a search results page, as shown in Figure 2.8
)
Figure 2.8 Google search preview
Figure 2.9 shows the other information that Google now has about me.
Figure 2.9 Additional information Google knows
We have only done a small Microdata example here but there are lots of options if you want to use it. Check out the Google pages above for more examples of what can be created. Along with Google, there are a couple of tools that might help when you are creating Mircodata: foolip.org/microdatajs/live and microdata.freebaseapps.com.