<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.
Although can also set format-detection for Safari/iOS. Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.
ReplyDeletemeta name="format-detection" content="telephone=yes"
Default value is 'no' BTW.
There's a new bit of HTML5 - the href="tel:" attribute:
ReplyDeleteBook now, call 01234 567 890