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   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

User · Answer

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

User · Answer

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

User · Answer

this worked for me   1 make a standards compliant link            lt a href  tel 1500100900     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     gt  -1                navigator userAgent indexOf   iPod     gt  -1                navigator userAgent indexOf   iPad     gt  -1                navigator userAgent indexOf   Android     gt  -1                navigator userAgent indexOf   webOS     gt  -1

User · Answer

I use the normal  lt a href  tel  123456  gt 12 34 56 lt  a gt  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  lt  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

User · Answer

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    x000D   x000D   lt a href  tel  18475555555  gt 1-847-555-5555 lt  a gt  x000D   x000D   x000D

User · Answer

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    lt a href  callto 0123456789  gt call me lt  a gt    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  lt  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

User · Answer

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

User · Answer

Mobile Safari  iPhone  amp  iPod Touch  use the tel  scheme   How do I dial a phone number from a webpage on iPhone

User · Answer

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   lt iframe name       target       style   display  none   gt  lt  iframe gt         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

User · Answer

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

User · Answer

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   lt iframe name  blackhole  style  display none  gt  lt  iframe gt         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

User · Answer

I used tel  for my project   It worked in Chrome  Firefox  IE9 amp 8  Chrome mobile and the mobile Browser on my Sony Ericsson smartphone    But callto  did not work in the mobile Browsers

User · Answer

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

User · Answer

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

[html] How to mark-up phone numbers?

Examples related to html

Examples related to markup

Examples related to url-scheme

Examples related to phone-number