How to mark-up phone numbers?

Question

I want to mark up a phone number as callable link in an HTML document. I have read the microformats approach, and I know, that the tel: scheme would be standard, but is quite literally nowhere implemented.

Skype defines, as far as I know, skype: and callto:, the latter having gained some popularity. I assume, that other companies have either other schemes or jump on the callto: train.

What would be a best practice to mark-up a phone number, so that as many people as possible with VoIP software can just click on a link to get a call?

Bonus question: Does anyone know about complications with emergency numbers such as 911 in US or 110 in Germany?

Update: Microsoft NetMeeting takes callto: schemes under WinXP. This question suggests, that Microsoft Office Communicator will handle tel: schemes but not callto: ones. Great, Redmond!

Update 2: Two and a half years later now. It seems to boil down to what you want to do with the number. In mobile context, tel: is the way to go. Targeting desktops it's up to you, if you think your users are more Skype people (callto:) or will more likely have something like Google Voice (tel:) installed. My personal opinion is, when in doubt use tel: (in line with @Sidnicious' answer).

Update 3: User @rybo111 noted, that Skype in Chrome has meanwhile jumped on the tel: bandwagon. I cannot verify this, because no machine with both at hand, but if it's true, it means we have finally a winner here: tel:

Harwill

Any news about the bonus question? I was wondering about special numbers such as the (usually?) toll-free 800- in Italy. – Poling

Unfortunately not. It seems to boil down to what your provider (VoiP, cellphone comp or whatever) does. This may as well be charging for 800 numbers. – Harwill

I'm using Google Voice in Chrome and it does not recognize tel: URIs. I'm stil sticking with callto: and a display of the phone number on the theory that the mobile phone browsers should auto-detect the number anyway. – Lavern

I just tried a callto: URL in Chrome on Android 4.2.2 and got an Error 302 -- (net:ERR_UNKNOWN_URL_SCHEME). Not only did the latest version of Android (at time of posting) fail to automatically detect the phone number, it also failed to either call it in the dialer or Android version of Skype (I even have it running in the background -- no dice). IMO, @mordy's answer is best for targeting both mobile and desktop. – Apoenzyme

Despite the title, this question is really "what URL scheme should you use for phone numbers", rather than how to mark them up. – Trebizond

Yes, that's true. The context was writing an HTML file, and the question at hand, whether and how to add markup around phone numbers, but at the core it's a question about URIs. – Harwill

I just tested tel: again and (at least on Mac OS and Windows) it now seems to work with Skype. I think it is time to stop using callto: :-) – Acclamation

@Harwill Skype is prompted when using Chrome with tel: so perhaps you should remove your comment at the end about Skype using callto:? – Bougie

@Bougie thanks. I added another update so that the context remains intact. But it seems we have finally a winner. – Harwill

Could you please try to edit your question updates into the according answers. Like this it’s kind of a mess. – Son

Possible duplicate of URL Scheme for Phone Call – Overhead

Answer 1

The tel: scheme was used in the late 1990s and documented in early 2000 with RFC 2806 (which was obsoleted by the more-thorough RFC 3966 in 2004) and continues to be improved. Supporting tel: on the iPhone was not an arbitrary decision.

callto:, while supported by Skype, is not a standard and should be avoided unless specifically targeting Skype users.

Me? I'd just start including properly-formed tel: URIs on your pages (without sniffing the user agent) and wait for the rest of the world's phones to catch up :) .

Example:

<a href="tel:[phone]">1-847-555-5555</a>

Delivery

Thanks for the detailed answer! Since I asked the question, I was tempted to follow this approach, too. Use the standard and tell complaining people, that they use the bad app/tool. Although it gets hard, if this one is your client, I think, you're right. If nonetheless I have to consider Skype users, I'll go with my JavaScript solution the other way round. – Harwill

It's 2014 and Tel: now works for Skype. But if you wanted to initiate a call to the Skype Echo / Sound Test Service, the link would be <a href="skype:echo123?call">Call the Skype Echo / Sound Test Service</a> from msdn.microsoft.com/en-us/library/office/… – Swellhead

Anybody tried href="tel://1-555-555-5555" format ? the guys from Tutsplus recommend it code.tutsplus.com/tutorials/… – Feria

In my experience with the tel: tag Skype requires the country code with a + to be on the number (e.g. "+44" for UK numbers) to parse the number properly. Otherwise it just opens Skype but doesn't try to dial. – Condolence

Shouldn't the example be: <a href="tel:[phone]">? Note the + before the initial 1.) – Smokestack

There is an article on the current state of phone links over on CSS-Tricks css-tricks.com/the-current-state-of-telephone-links dating from 2016. tel: seems to be implemented by all modern browsers now. – Nevlin

@AdrienBe. The double slash is for protocols with hierarchical elements (which is why http: and ftp: have it, but mailto: does not. There's no path in a telephone number, so no double slash after tel:. – Electrostriction

Answer 2

My test results:

callto:

• Nokia Browser: nothing happens
• Google Chrome: asks to run skype to call the number
• Firefox: asks to choose a program to call the number
• IE: asks to run skype to call the number

tel:

• Nokia Browser: working
• Google Chrome: nothing happens
• Firefox: "Firefox doesnt know how to open this url"
• IE: could not find url

Nonperformance

To add to this, the behaviour is the same for Google Chrome on Android 4.2.2 (Nexus 4). Having the Android version of Skype running in the background doesn't even make callto: links work. In short, you can't really use callto: links if you're wanting to target mobile at the minute. – Apoenzyme

Now on chrome 35 you get this popup – Lovesick

In chrome and firefox ( maybe IE as well), you can register a web service of yours for the tel: prefix with registerProtocolHandler. – Bowerbird

U have to use +countrycode phone number that works on chrome. tel: links dont seem to work w skype on chrome w/o + – Mchenry

Update on OSX and Chrome: it asks to launch Facetime. – Orphism

You can configure your (non-mobile) browser to call another program to handle the tel: URI scheme. I did (on Firefox) and it's working (but I do not find tel: URI in the wild…). – Avram

Update for 2016. Running on Windows 7 with a tel: link on the webpage: Google Chrome 50 shows a scary dialog box "External Protocol Request", clicking "Launch Application" will open Skype. Firefox 45 shows a dialog box "Launch Application" with the ability to select between Skype and other program. IE 11 shows a dialog box "Do you want to allow this website to open a program" with Skype and phone number indicated, clicking "Allow" shows another Security warning ("open outside of Protected mode") and then launches Skype. In all cases Skype presents a confirmation dialog before dialling. – Gussi

I believe it is best to indicate the number in international format (with + and country code) without any spaces or dashes. – Gussi

The callto: links behave in the same manner, but since this is proprietary for Skype, they should be avoided. – Gussi

Answer 3

The best bet is to start off with tel: which works on all mobiles

Then put in this code, which will only run when on a desktop, and only when a link is clicked.

I'm using http://detectmobilebrowsers.com/ to detect mobile browsers, you can use whatever method you prefer

if (!jQuery.browser.mobile) {
    jQuery('body').on('click', 'a[href^="tel:"]', function() {
            jQuery(this).attr('href', 
                jQuery(this).attr('href').replace(/^tel:/, 'callto:'));
    });
}

So basically you cover all your bases.

tel: works on all phones to open the dialer with the number

callto: works on your computer to connect to skype from firefox, chrome

Prefab

Yes, this -- callto: doesn't work at all on Android (See my comment on Murat's answer), and tel: doesn't really work on desktop. It's unfortunate, really. – Apoenzyme

Hmmm, sadly a quick jsfiddle doesn't seem to let this work either... jsfiddle.net/tchalvakspam/gVZYt/3 – Cartouche

Working on Seamonkey 2.20 on Mac 10.8 put below the <body <?php body_class(); ?>> code on a wordpress theme's header.php file. – Annabelleannabergite

callto: didnot worked for chrome in mac and the version is up-to-date – Bah

Sadly this has been depreciated in JQuery 1.9 jquery.com/upgrade-guide/1.9/#jquery-browser-removed – Sunk

Answer 4

As one would expect, WebKit's support of tel: extends to the Android mobile browser as well - FYI

Tillfourd

Answer 5

I keep this answer for "historic" purpose but don't recommend it anymore. See @Sidnicious' answer above and my Update 2.

Since it looks like a draw between callto and tel guys, I want to throw in a possible solution in the hope, that your comments will bring me back on the way of light ;-)

Using callto:, since most desktop clients will handle it:

<a href="callto:0123456789">call me</a>

Then, if the client is an iPhone, replace the links:

window.onload = function () {
  if (navigator.userAgent.match (/iPhone/i)) {
    var a = document.getElementsByTagName ("a");
    for (var i = 0; i < a.length; i++) {
      if (a[i].getAttribute ('href').search (/callto:/i) === 0) {
        a[i].setAttribute ('href', a[i].getAttribute ('href').replace (/^callto:/, "tel:"));
      }
    }
  }
};

Any objections against this solution? Should I preferably start from tel:?

Harwill

It could be that the iPhone also supports the callto scheme, but that Apple prefers tel, so that's the one mentioned in the documentation. – Safety

See my answer. callto: is a proprietary URI scheme, so I wouldn't start there. – Delivery

callto: didnot worked for chrome in mac and the version is up-to-date. – Bah

That doesn't surprise me. The landscape was fundamentally different in 2009, when the answer was given. Also, you need a third-party program, that registers for the callto: scheme, like Skype. Chrome itself has no idea, what it should do. – Harwill

Answer 6

Mobile Safari (iPhone & iPod Touch) use the tel: scheme.

How do I dial a phone number from a webpage on iPhone?

Safety

So if the main targetted users are iPhone or iPod Tough (and maybe other mobile devices, I don't know... ) , you should use tel: If the main users are normal web clients, (IE, Firefox etc..) using skype or some other VoIP software, I think callto: would be best. – Spoonfeed

Answer 7

RFC3966 defines the IETF standard URI for telephone numbers, that is the 'tel:' URI. That's the standard. There's no similar standard that specifies 'callto:', that's a particular convention for Skype on platforms where is allows registering a URI handler to support it.

Adlee

That's what Sidnicious said, yes. – Harwill

Answer 8

this worked for me:

1.make a standards compliant link:

        <a href="tel:[phone]">

2.replace it when mobile browser is not detected, for skype:

$("a.phone")
    .each(function()
{ 
  this.href = this.href.replace(/^tel/, 
     "callto");
});

Selecting link to replace via class seems more efficient. Of course it works only on anchors with .phone class.

I have put it in function if( !isMobile() ) { ... so it triggers only when detects desktop browser. But this one is problably obsolete...

function isMobile() {
    return (
        ( navigator.userAgent.indexOf( "iPhone" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPod" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPad" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "Android" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "webOS" ) > -1 )
    );
}

Colpotomy

The "proper" way to detect mobile browsers is to check for the case insensitive string "mobile". – Willyt

Answer 9

I used tel: for my project.

It worked in Chrome, Firefox, IE9&8, Chrome mobile and the mobile Browser on my Sony Ericsson smartphone.

But callto: did not work in the mobile Browsers.

Scatterbrain

Answer 10

I would use tel: (as recommended). But to have a better fallback/not display error pages I would use something like this (using jquery):

// enhance tel-links
$("a[href^='tel:']").each(function() {
    var target = "call-" + this.href.replace(/[^a-z0-9]*/gi, "");
    var link = this;

    // load in iframe to supress potential errors when protocol is not available
    $("body").append("<iframe name=\"" + target + "\" style=\"display: none\"></iframe>");
    link.target = target;

    // replace tel with callto on desktop browsers for skype fallback
    if (!navigator.userAgent.match(/(mobile)/gi)) {
        link.href = link.href.replace(/^tel:/, "callto:");
    }
});

The assumption is, that mobile browsers that have a mobile stamp in the userAgent-string have support for the tel: protocol. For the rest we replace the link with the callto: protocol to have a fallback to Skype where available.

To suppress error-pages for the unsupported protocol(s), the link is targeted to a new hidden iframe.

Unfortunately it does not seem to be possible to check, if the url has been loaded successfully in the iframe. It's seems that no error events are fired.

Unthinkable

Nice use of hidden iframes! – Harwill

Answer 11

Since callto: is per default supported by skype (set up in Skype settings), and others do also support it, I would recommend using callto: rather than skype: .

Spoonfeed

Here I agree. But all together it seems to boil down to tel: vs callto:, and that's not an easy one. – Harwill

Answer 12

Although Apple recommends tel: in their docs for Mobile Safari, currently (iOS 4.3) it accepts callto: just the same. So I recommend using callto: on a generic web site as it works with both Skype and iPhone and I expect it will work on Android phones, too.

Update (June 2013)

This is still a matter of deciding what you want your web page to offer. On my websites I provide both tel: and callto: links (the latter labeled as being for Skype) since Desktop browsers on Mac don't do anything with tel: links while mobile Android doesn't do anything with callto: links. Even Google Chrome with the Google Talk plugin does not respond to tel: links. Still, I prefer offering both links on the desktop in case someone has gone to the trouble of getting tel: links to work on their computer.

If the site design dictated that I only provide one link, I'd use a tel: link that I would try to change to callto: on desktop browsers.

Lavern

the stock browser in the latest open-source build of Android "Ice Cream Sandwich" still appears to support only tel:; clicking on a callto: link results in "Web page not available" – Tillfourd

Answer 13

Using jQuery, replace all US telephone numbers on the page with the appropriate callto: or tel: schemes.

// create a hidden iframe to receive failed schemes
$('body').append('<iframe name="blackhole" style="display:none"></iframe>');

// decide which scheme to use
var scheme = (navigator.userAgent.match(/mobile/gi) ? 'tel:' : 'callto:');

// replace all on the page
$('article').each(function (i, article) {
    findAndReplaceDOMText(article, {
        find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
        replace:function (portion) {
            var a = document.createElement('a');
            a.className = 'telephone';
            a.href = scheme + portion.text.replace(/\D/g, '');
            a.textContent = portion.text;
            a.target = 'blackhole';
            return a;
        }
    });
});

Thanks to @jonas_jonas for the idea. Requires the excellent findAndReplaceDOMText function.

Phobos

This solution is not ideal, since analyzing the user agent string is considered bad practice. Consider a device that supports the tel URI but doesn't report itself as a mobile. – Delphina

Answer 14

I use the normal <a href="tel:+123456">12 34 56</a> markup and make those links non-clickable for desktop users via pointer-events: none;

a[href^="tel:"] {
    text-decoration: none;
}
.no-touch a[href^="tel:"] {
    pointer-events: none;
    cursor: text;
}

for browsers that don't support pointer-events (IE < 11), the click can be prevented with JavaScript (example relies on Modernizr and jQuery):

if(!Modernizr.touch) {
    $(document).on('click', '[href^="tel:"]', function(e) {
        e.preventDefault();
        return false;
    });
}

Stormy

Using Modernizr.touch which is Touch Event support to infer support for tel: is unreliable. Easy exception cases: iPad, Windows tablets, etc. – Augend

Even Chrome running on a Windows desktop reports itself as a touch device. – Delphina

Some desktop-class machines do support tel: urls. For a Mac-specific example, FaceTime on the Mac is standard and works with tel:, going so far as to use the user's iPhone with Handoff/Continuity, so using pointer-events: none to target desktops might not be wise to do anymore. – Jaggers