I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Adding Phone Numbers To Web Pages With HTML5 and Microdata

seo / microdata

Estimated reading time: 2 minutes, 51 seconds

Traditionally, phone numbers have been placed on web pages as a simple string of digits, indistinguishable from any other content. When 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 .

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 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="">
<h1 itemprop="name">Beach Bunny Swimwear</h1>
Phone: <span itemprop="telephone"><a href="tel:+18506484200">


Skype does not currently use the tel protocol, but callto. Generally speaking I’d stick with using tel, but if you wanted to support both, (assuming that desktop visitors were using Skype and mobile users their native app), I’d probably use and a script like Mobile Detect to determine if the visitor was using a mobile device, and change the protocol on that basis:

Call <a href="<? echo ($detect->isMobile()) ? 'tel' : 'callto'; ?> :+1-579-827-0034">579-827-0034</a>

(Note that I am using the PHP ternary shortcut for this code sample).

Controlling Skype’s Interaction With Internet Explorer

There is an issue if your visitor is using Internet Explorer to view your site and has Skype installed: the application will hook into IE in such a way that the browser will uniquely style digits on your page that it believes are a phone number. This appearance may well clash with your . The easiest solution is to include a soft hyphen in the visual representation of the phone number by using an HTML entity, in the form of &shy; or &#1730;

<a href="callto:+15798270034">(579) 827&#1730;0034</a>

This is enough to fool Skype and stop it from styling the phone number. The functionality of tel and callto will be unaffected by the entity.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.