How to mark-up phone numbers?
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?
Cheers,
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:
Solution 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:+18475555555">1-847-555-5555</a>
Solution 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
Solution 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
Solution 4:
As one would expect, WebKit's support of tel:
extends to the Android mobile browser as well - FYI
Solution 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:
?