HTML telephone number links

With so many people accessing the Internet via smartphones it makes sense to style telephone numbers on web pages as links that can be clicked to make a normal voice call. Remember that this will only work on a device capable of making a telephone call.

1. Basic

The basic telephone link looks similar to the standard anchor tag, with the difference being the protocol in the value for the href attribute:

<a href="tel:+16505434800">+1 (650) 543 4800</a>

tel: is as much a protocol as for example http: or ftp:.

2. Disable

iOS autodetects telephone numbers, but as the web developer you can switch that off if you want to with the following meta tag:

<meta name="format-detection" content="telephone=no">

To prevent search engines from trying to index telephone links (follow the link to see where it goes), use the rel attribute with the value nofollow:

<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

3. CSS

The following cool CSS from the link below:

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

Example: +27844233359

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

Example: +27844233359

References:

1. The Current State of Telephone Links | CSS-Tricks. (2016). Retrieved 4 November 2022, from https://css-tricks.com/the-current-state-of-telephone-links/