Embedding Phone Numbers with HTML5 for iOS

How to embed contact data in a web page so that an iOS device can recognise text as a phone number or as contact data. The key to this is using semantic data: specifically microdata.

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:

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.

Comments

See also this: 0123456789 which exposes a number to be used by many mobile phones.

<a href="tel:0123456789">0123456789</a>