The Current State of Telephone Links | CSS-Tricks

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 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 and later adopted by iOS, 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 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 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 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 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">