Embedding Phone Numbers with HTML5 for iOS

Snippet to embed contact data in a web page so that an iOS device can recognise text as a phone number or as contact data. Use the 'itemprop' attribute, although you can also wrap the div in a 'vcard' class, and setting the class of the phone number span to 'tel' seemed to do funky things too:

<div itemscope>
  <span itemprop="name">Rob Carr</span>
  <a class="nowrap" href="mailto:rob@google.com" itemprop="email">rob@google.com</a>
  <span class="nowrap" itemprop="tel">+44 1234 567 890</span>
</div>

I added a 'nowrap' class (white-space:nowrap;) purely for styling and usability. When the name or phone number is clicked on, you get the iOS dialogue box:

Contact info recognition doesn't seem to work on HTML5 desktop browsers, and no idea about whether other mobile devices will recognise the 'itemprop' property.

You can wade through the Microdata spec for HTML5 at http://dev.w3.org/html5/md/, or Google for more examples. HTML5 Doctor always a good read.