The Current State of Telephone Links  ## Metadata - Author: [[Geoff Graham]] - Full Title: The Current State of Telephone Links - Category: #articles - Summary: Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. - URL: https://css-tricks.com/the-current-state-of-telephone-links/ Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recognize phone numbers and do the linking for us, but not always. There is enough web traffic on mobile devices and plenty of desktops apps that are capable of making calls, that it’s worth knowing more about phone links. ##### Default Usage We [have a snippet for phone links](https://css-tricks.com/snippets/html/iphone-calling-and-texting-links/) on this site that’s been hanging around since 2011: ``` <a href="tel:1-562-867-5309">1-562-867-5309</a> ``` This also works on text links: ``` <a href="tel:1-562-867-5309">Click to Call!</a> ``` `tel:` is not so much a feature as it is a protocol, much in the same way that `http:` and `mailto:` are protocols for the `<a>` tag feature. The spec itself has nothing to say about it, though HMTL5 did provide support for custom protocol handlers, which allow such a protocol to be used. You’re probably wondering why `tel:` can be considered default usage in the absence of an official spec on it. You can credit this to the fact that it was a proposed standard [as far back as 2000](http://www.ietf.org/rfc/rfc2806.txt) and later [adopted by iOS](https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/PhoneLinks/PhoneLinks.html), making it the de facto way to go by roughly 2007. There are other phone-based protocols (which we’ll get to later), but we’ll be focusing on `tel:` given its relative prominence. ##### Browser Support We see `tel:` pop up as a protocol handler for links with no official documentation; and where there is no documentation, we often see differences in browser support and behavior. That’s not to say that browsers fail to recognize the `<a>` tag itself. Instead, browsers might make different decisions on what to do when that link is clicked. For example, a browser may assume another app needs to open and will trigger a dialog asking which app to use. In other cases, the link might be ignored altogether. | Browser | Does it link? | When clicked it… | | --- | --- | --- | | Android | Yes | Launches phone app | | BlackBerry 9900 | Yes | Initiates phone call | | Chrome | Yes | Triggers dialog confirming the use of another app | | Edge | Yes | Triggers dialog confirming the use of another app | | Internet Explorer 11 | Yes | Triggers dialog confirming the use of another app | | Internet Explorer 11 Mobile | Yes | Initiates phone call | | iOS | Yes | Triggers options to call, message, copy or add the number to the Contacts app | | Opera (OSX) | Yes | Triggers dialog confirming the use of another app | | Opera (Windows) | Yes | Triggers an error dialog that does not recognize the protocol | | Safari | Yes | Launches FaceTime | ##### Styling Phone Links Styling telephone numbers is like any other link. In fact, it will inherit the default styling for anchors: ``` a { color: orange; text-decoration: none; } ``` Let’s say we only styles to apply to telephone links. We can do that with a pseudo selector that searches out the `tel:` text in a given URL: ``` a[href^="tel:"] { color: orange; text-decoration: none; } ``` Tuts+ [has a nice trick](http://webdesign.tutsplus.com/articles/quick-tip-make-telephone-numbers-do-something--webdesign-9271) using the `::before` pseudo selector to add the unicode phone character before the number is displayed: ``` a[href^="tel:"]:before { content: "\260e"; margin-right: 0.5em; } ``` ##### Alternative Phone-Related Links Believe or not, `tel:` is not the only way to initiate a phone call with a link. Here are a few other custom phone-based protocol handlers at our disposal. * **`callto:`** Exactly like `tel:` but used to initiate calls via the Skype app. * **auto-detected:** Many browsers will automatically detect a phone number in the HTML and link it up for you—no need to change the markup. iOS, for example, will totally do this, though it did not seem to be the case for Chrome on Android. * **`sms:`** Skip the call and go straight to text message. This seems to be a lot less supported than `tel:` is among browsers, including mobile. * **`fax:`** Go back to the future with fax machines. Again, spotty reliability. ##### Best Practices It’s kinda funny talking about best practices when it comes to something without specifications. The spec [does give a brief opinion](https://www.w3.org/TR/mwabp/#bp-interaction-uri-schemes) on the “click to call” idea, but here are a few things to bear in mind when working with telephone numbers and links. ###### Consider the Context A telephone link can make for an excellent call-to-action, especially on mobile phones where it reduces the friction between the content and the call. At the same time, telephone links could be considered a hindrance on a desktop experience where a phone call wouldn’t be possible if the device lacks an app that supports it. One idea would be to create a class specifically for telephone links and attempt to show or hide them based on what we know about the browser. Modernizr and media queries are handy here, though totally imprecise. ###### Use Country Codes A country code is not required but could be a nice touch for sites with international traffic. Country codes can be preceded by a `+` but that too is not required. ``` <a href="tel:+01-562-867-5309">1-562-867-5309</a> ``` ###### Search Engine Optimization SEO experts might have more to add on this than I do, but Google offers a [structured data format for local businesses](https://developers.google.com/structured-data/local-businesses/) and using it will make telephone links more recognizable to crawlers, formatting them on search results pages in a way that makes the number much more actionable. Dudley Storey provides [an excellent overview](http://thenewcode.com/536/Adding-Phone-Numbers-To-Web-Pages-With-HTML5-and-Microdata) with the following example: ``` <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> ```  On the flip side of wanting search engines to follow phone links, you can add `rel="nofollow"` to discourage links from being followed and indexed. This might be a good idea for any link not being designated as a call to action since web crawlers would be inclined to try to follow it to nowhere. ``` <a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a> ``` ###### Turning off Number Detection in iOS If you plan to add phone links to your markup, then you may also want to consider disabling iOS from auto-detecting phone numbers and overriding your styles. Add the following the the document `<head>` to turn that off: ``` <meta name="format-detection" content="telephone=no"> ``` ##### Further Reading * [Quick Tip: Make Telephone Numbers Do Something](http://webdesign.tutsplus.com/articles/quick-tip-make-telephone-numbers-do-something--webdesign-9271) by Tuts+ * [Adding Phone Numbers To Web Pages With HTML5 and Microdata](http://thenewcode.com/536/Adding-Phone-Numbers-To-Web-Pages-With-HTML5-and-Microdata) by Dudley Storey * [Original Draft Proposal 2806](https://tools.ietf.org/html/rfc2806) which has been obsolete by [Proposal 3966](https://tools.ietf.org/html/rfc3966) * [Apple URL Scheme Reference](https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/PhoneLinks/PhoneLinks.html), The Current State of Telephone Links, Geoff Graham, 01gnmcyb5nzv2y7fx9r8wybr1c.