The Current State of Telephone Links

Problem

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.

Solution

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.

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 thathttp: 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.

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

Related articles

https://css-tricks.com/the-current-state-of-telephone-links/

• Page:
  The Current State of Telephone Links
• Page:
  Chrome Dev Tools
• Page:
  Using Tamper Data To Troubleshoot APIs