Traditionally, phone numbers have been placed on web pages as a simple string of digits, indistinguishable from any other content. When mobile users visit sites, they have an expectation that phone numbers should be useful, leading to direct contact.

We achieve that with two approaches: adding a link with a tel protocol, and inserting microdata. There are also a few considerations we must make for desktop applications, most particularly Skype and Internet Explorer.

Linking Phone Numbers For Mobile Devices and Telephony Applications

Much like adding a mailto: link around eMail addresses on a page, phone numbers are linked with a tel protocol:

<p>To make a booking, call <a href="tel:+13174562564">317-456-2564</a>

iPhones, Androids and other mobile devices will now recognize the phone number; engaging the link will initiate a phone call.

There are a few things to be aware of:

• Remember that all web pages are international; the digits listed after tel should include the international dialing prefix, making the number useable from any location.
• If the page is viewed in a desktop browser, clicking on the number will bring up an associated telephony application, such as Skype, Google Voice or Microsoft Communicator, much as using a mailto: protocol in a link will bring up an eMail application.
• Visual separators are optional in the specification, with the exception of the + symbol before the international calling code.

Do not confuse the tel value with how the number is dialed on a phone: most phone systems will require a 00 before an international code when dialing, but this is not included in the tel value. For example, to specify a phone number in New Zealand:

<p>Call <a href="tel:+6494452687">445-2663</a> in Auckland to reserve your flight.

It is possible to insert pauses in the phone number, for the purposes of adding an extension:

<p>Call customer service at <a href="tel:+13235798328p22">323-579-8328 ext. 22</a>

(p defines a one-second pause; w means "wait for dial tone")

You can also specify fax numbers in exactly the same way by using the fax: protocol.

Adding Microdata

You may want to enrich your markup by adding microdata, enabling search engines to better understand the fact that the digits on the page are, in fact, a phone number:

<div itemscope itemtype="http://schema.org/LocalBusiness">
	<h1 itemprop="name">Beach Bunny Swimwear</h1>
		Phone: <span itemprop="telephone"><a href="tel:+18506484200">
850-648-4200</a></span>
</div>

Photograph by Jan-Hendrik Caspers, used under a Creative Commons Attribution-ShareAlike 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.