css-tricks.com
Open in
urlscan Pro
2606:4700:4400::6812:25f6
Public Scan
URL:
https://css-tricks.com/the-current-state-of-telephone-links/
Submission: On November 10 via api from US — Scanned from DE
Submission: On November 10 via api from US — Scanned from DE
Form analysis 3 forms found in the DOM
<form id="mktoForm_1402" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); width: 151px;">
<style type="text/css">
.mktoForm .mktoButtonWrap.mktoFirefox .mktoButton {
background-color: #82C43A;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
border: none;
display: inline-block;
vertical-align: middle;
margin: 2px;
font: italic 14px/32px Georgia, Serif;
text-align: center;
color: white;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1), 0px 3px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1), 0px 3px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1), 0px 3px 0px rgba(0, 0, 0, 0.1);
padding: 0px 15px 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.mktoForm .mktoButtonWrap.mktoFirefox .mktoButton:hover {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
}
.mktoForm .mktoButtonWrap.mktoFirefox .mktoButton:active {
position: relative;
top: 2px;
-webkit-box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px rgba(0, 0, 0, 0.1);
}
</style>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
<div class="mktoOffset" style="width: 10px;"></div>
<div class="mktoFieldWrap mktoRequiredField"><label for="Email" id="LblEmail" class="mktoLabel mktoHasWidth" style="width: 100px;">
<div class="mktoAsterix">*</div>Email Address:
</label>
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><input id="Email" name="Email" maxlength="255" aria-labelledby="LblEmail InstructEmail" type="email" class="mktoField mktoEmailField mktoHasWidth mktoRequired"
aria-required="true" style="width: 150px;"><span id="InstructEmail" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow"><input type="hidden" name="utm_source__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="css-tricks" style="margin-bottom: 10px;">
<div class="mktoClear"></div>
</div>
<div class="mktoButtonRow"><span class="mktoButtonWrap mktoFirefox" style="margin-left: 120px;"><button type="submit" class="mktoButton">Subscribe</button></span></div><input type="hidden" name="formid" class="mktoField mktoFieldDescriptor"
value="1402"><input type="hidden" name="munchkinId" class="mktoField mktoFieldDescriptor" value="113-DTN-266">
</form><form autocomplete="off" role="search" class="jetpack-instant-search__search-results-search-form">
<div class="jetpack-instant-search__search-form">
<div class="jetpack-instant-search__box"><label class="jetpack-instant-search__box-label" for="jetpack-instant-search__box-input-1">
<div class="jetpack-instant-search__box-gridicon"><svg class="gridicon gridicons-search " focusable="true" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" style="height: 24px; width: 24px;">
<title>Magnifying Glass</title>
<g>
<path d="M21 19l-5.154-5.154C16.574 12.742 17 11.42 17 10c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.42 0 2.742-.426 3.846-1.154L19 21l2-2zM5 10c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5-5-2.243-5-5z"></path>
</g>
</svg></div><input autocomplete="off" id="jetpack-instant-search__box-input-1" class="search-field jetpack-instant-search__box-input" inputmode="search" placeholder="Search…" type="search"><button class="screen-reader-text assistive-text"
tabindex="-1">Search</button>
</label></div>
</div>
</form><form novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); visibility: hidden; position: absolute; top: -500px; left: -1000px; width: 1600px;">
</form>Text Content
Skip to main content
CSS-Tricks
* Articles
* Videos
* Almanac
* Newsletter
* Guides
* DigitalOcean
* DO Community
Search
phone
THE CURRENT STATE OF TELEPHONE LINKS
Geoff Graham on Feb 23, 2016
DigitalOcean provides cloud products for every stage of your journey. Get
started with $200 in free credit!
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">
FURTHER READING
* Quick Tip: Make Telephone Numbers Do Something by Tuts+
* Adding Phone Numbers To Web Pages With HTML5 and Microdata by Dudley Storey
* Original Draft Proposal 2806 which has been obsolete by Proposal 3966
* Apple URL Scheme Reference
See the difference yourself with a $200 free credit to try out DigitalOcean!
Build, deploy and scale apps quickly using App Platform, DigitalOcean's fully
managed solution.
Sponsored Guess less and sell more with the #1 email marketing and automation
brand. Sign up today.
Sponsored Squarespace has the templates, designer fonts, and color palettes to
fit your personal style.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based
hosting and services.
COMMENTS
1. Lewis Cowles
Permalink to comment# February 23, 2016
Been using [href^=”tel:”] links since 2009. While skype may use callto: it
also does use “tel:” protocol links for machines with browsers using skype
on my ubuntu and Windows 8.1 Laptop (may require their click-to-call plugin
IDK).
I’ve never encountered a user with a modern smart-phone that could not call
one, but for windows users, a registry entry may be needed to map the
protocol identifier to a program if it does not initially work.
http://caniuse.com/#search=tel
2. Robin
Permalink to comment# February 23, 2016
nofollow doesn’t tell Google not to follow the link; it tells it to not
assign any value to the fact that it’s come from the site it exists on.
Subtle, but it won’t dissuade crawlers (the tel: protocol might though).
3. Deborah
Permalink to comment# February 23, 2016
Timely post, Geoff! Thank you for the deep dive into phone links. I’ve been
puzzling over how to handle phone links on my past few projects. Good
reminder about using Google’s structured data format.
* Lewis Cowles
Permalink to comment# February 23, 2016
Also you can add a logo, a street address, lots of cool things, be sure
to check out schema.org for detailed information on localbusiness and
organization, as it’s more useful than just phone numbers.
http://schema.org/Organization
http://schema.org/LocalBusiness
4. Daniel
Permalink to comment# February 23, 2016
does anyone know how to generate a click to call in the meta description?
5. Pawel Grzybek
Permalink to comment# February 23, 2016
Super cool article! First thought after read: Lets make a js script that
replaces a value of href dependable of the browser engine. On browser
without support it could simply redirect to contact page instead of dialog
boxes.
I belive that inlined schema is a little bit outdated. Google recommends to
use json:ld instead.
* Vanderson
Permalink to comment# February 24, 2016
Thank you for the note on JSON-LD (this is the spelling to look for in a
search for SEO), this is exactly what I have been hoping for since I
found out about schema.org.
The attribute soup and messy html makes my head spin. :P (I had seen
JSON-LD before, but dismissed it as another Google “scheme” to manipulate
sites into doing their bidding…. :P)
6. Max
Permalink to comment# February 24, 2016
+01-562-867-5309
It’s a mistake. There is no such phone number. International code for North
American Numbering Plan is +1, and +0 is reserved/not used.
* Davezilla
Permalink to comment# February 25, 2016
That’s my understanding as well. I’ve always used just +1 for US numbers.
7. Richard
Permalink to comment# February 24, 2016
No mention of Firefox support?
* Davezilla
Permalink to comment# February 25, 2016
I’ve tried tel: links on Firefox (Mac) from desktop and it tries to
launch FaceTime which is the correct action for desktop.
8. Josh H
Permalink to comment# February 24, 2016
Great read, Geoff. Leaning into the de facto standard is a great way to go.
Phone numbers can be difficult to manage as even they have evolved very
organically over time. In a common use case we will at some point
inevitably collect phone numbers on forms.
For those interested here’s a machine-friendly and simple way to do so
using String replacement while processing form data:
https://gist.github.com/jhabdas/66abcf1ac862179cf4bf
9. Natan
Permalink to comment# February 24, 2016
Excelent post. Thanks!
10. Hussain
Permalink to comment# February 25, 2016
Very useful post. Thanks!
11. brianary
Permalink to comment# February 25, 2016
I’m not sure I understand what you mean about there not being a spec. IANA
handles the registry of URI schemes:
http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
12. Josh Chunick
Permalink to comment# February 29, 2016
You can also use extensions in the number by appending a comma and then the
extension. The comma represents a pause.
13. tomByrer
Permalink to comment# March 2, 2016
There is also Microformats 2.0, which is more terse than schema.org.
http://microformats.org/wiki/h-card
14. Sourav Basak
Permalink to comment# March 3, 2016
Nice article. but, need to concentrate on spelling like “automagically”,
“HMTL5” and many more. You can search on this text also.
—
Regards,
Sourav Basak [Blogger, entrepreneur and thinker]
http://www.namasteui.com
* Doug
Permalink to comment# March 3, 2016
Hehe, ‘automagically’ is a USA idiom. A portmanteau of automatic and
magic. Something that is automatic and also you dont have to think about
how to get it to happen; it happens like magic!
This comment thread is closed. If you have important information to share,
please contact us.
OFFERING OPTIONS FOR MAILTO: AND TEL: LINKS
I generally like mailto: links. But I feel like I can smell a mailto: link
without even inspecting or clicking it, like some kind of incredibly useless
superpower. I know that if I've got my default mail client set, clicking that
link will do what I want it to do,…
August 21, 2020
APPLE DECLINED TO IMPLEMENT 16 WEB APIS IN SAFARI DUE TO PRIVACY CONCERNS
Why? Fingerprinting. Rather than these APIs being used for what they are meant
for, they end up being used for gross ad tech. As in, "hey, we don't know
exactly who you are, but wait, through a script we can tell your phone stopped
being idle from 8:00 am to…
July 24, 2020
SOLVING STICKY HOVER STATES WITH @MEDIA (HOVER: HOVER)
Mezo Istvan does a good job of covering the problem and a solution to it in a
blog post on Medium. If you tap on something that has a :hover state but you
don't leave the page then, on a mobile device, there is a chance that :hover
state "sticks."…
February 18, 2020
CSS-Tricks is powered by DigitalOcean.
KEEP UP TO DATE ON WEB DEV
with our hand-crafted newsletter
*
Email Address:
Subscribe
DIGITALOCEAN
* DigitalOcean
* DigitalOcean Community
* About DigitalOcean
* Legal
* Free Credit Offer
CSS-TRICKS
* Email
* Guest Writing
* Book
* Advertising
FOLLOW
* Twitter
* Instagram
* YouTube
* CodePen
* iTunes
* RSS
Back to Top
SEARCH RESULTS
Magnifying Glass
Search
Close search results
FiltersShow filters
Sort by:
Relevance•Newest•Oldest
NO RESULTS FOUND
FILTER OPTIONS
Close Search
Search powered by Jetpack