A clickable number is written <a href="tel:+33612345678">06 12 34 56 78</a>: international dialling code, no spaces in the href, a readable number in the link text. Conversely, to stop a browser turning your numbers into links by itself, add <meta name="format-detection" content="telephone=no"> to the head and create your tel: links by hand.
A phone number on a web page raises two opposite questions. The first: how do you make it clickable, so that a visitor on a mobile can start the call with a single tap? The second: how do you stop some browsers turning it into a link by themselves, with a style you do not control? The answer to the first is the tel: link; the answer to the second is the meta format-detection tag, the original subject of this article. Here are both, in the order you need them.
Creating a clickable phone link
The tel: URL scheme, defined by RFC 3966, tells the browser that a click should dial a number. On a smartphone, the Phone app opens with the number pre-filled; on a computer, the system offers a telephony application if it has one (FaceTime, Teams, Skype), otherwise nothing happens.
<a href="tel:+33612345678">06 12 34 56 78</a>Three rules for a link that works everywhere:
- International format in the
href:+33followed by the number without the leading 0. A national number does not dial correctly from abroad or from some applications. - No spaces or dots in the
href. The RFC allows hyphens and dots as visual separators, but not every device tolerates them: the safest option is a plain run of digits. The readable formatting (06 12 34 56 78) goes in the link text. - The number spelled out in the text. An icon on its own is no use to someone reading the page on a computer without telephony, nor to a screen reader.
For a number with an extension, the RFC provides the ext parameter: tel:+33123456789;ext=204. Support across applications is patchy; give the extension in the text as well.
Good display practices
<p>
Service client :
<a href="tel:+33123456789" class="tel">01 23 45 67 89</a>
(du lundi au vendredi, 9 h à 18 h)
</p>/* On large screens, where a direct call is unlikely, the link's appearance can be neutralised */
@media (min-width: 64rem) {
a.tel {
color: inherit;
text-decoration: none;
pointer-events: none;
}
}The CSS rule is an editorial choice, not an obligation: a computer with a telephony application can perfectly well place the call. Many sites keep the link active everywhere.
SMS link and WhatsApp link
The same principle applies to messages. The sms: scheme opens the messaging app; the body parameter pre-fills the text (encode spaces and special characters).
<a href="sms:+33612345678">Envoyer un SMS</a>
<a href="sms:+33612345678?body=Bonjour%2C%20je%20souhaite%20un%20devis">SMS avec message</a>WhatsApp provides a universal link, wa.me, followed by the international number without the + or leading zeros:
<a href="https://wa.me/33612345678?text=Bonjour" rel="noopener" target="_blank">Écrire sur WhatsApp</a>On mobile, it opens the app; on a computer, WhatsApp Web. Whether sms: and wa.me links open depends on the applications installed: always provide the number in plain text alongside.
Preventing automatic number detection
This is the opposite problem, and the original subject of this article. Some environments spot runs of digits that look like a phone number and turn them into tel: links on their own, underlined and coloured, without your HTML asking for it. A product reference, a postcode followed by a street number or an identifier can end up as clickable “numbers” and break your layout.
Who detects what, today:
- Safari on iPhone and iPad: detection on by default on every page.
- WebViews in mobile apps (and some Android browsers): variable behaviour, often on.
- Email clients: Apple Mail and the iOS Mail app detect numbers, dates and addresses in HTML emails.
- The old Microsoft Edge (EdgeHTML engine, 2015–2020), paired with Skype, converted numbers on Windows 10: that was the case described in the first version of this article. Today’s Chromium-based Edge no longer does so on desktop, and neither do Chrome or Firefox.
The tag that disables this behaviour goes in the head:
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
…
</head>From then on, the browser no longer creates any phone link by itself on the page, and only your explicit tel: links remain clickable. That is the recommended combination: automatic detection switched off, and every number you want clickable marked up by hand, in the correct international format. You keep control of the styling and avoid false positives.
You will come across content="telephone=no, date=no, address=no, email=no", particularly in HTML email templates, to stop Apple Mail underlining dates and addresses. Only the telephone=no value is documented by Apple; the others are tolerated by Safari and Mail, without any guarantee. They do not bother browsers that do not know them.
In an HTML email
The most common case today is no longer the web page but the email: an order reference or an amount turns into a blue link in Apple Mail. The same tag, in the head of the message, solves the problem. For clients that ignore it, a widespread trick is to wrap the number in a link of the same colour as the text, which pins the style down instead of leaving it to the client.
<a href="#" style="color: #333333; text-decoration: none;">Commande n° 2026 0907 4512</a>Accessibility and structured data
Two extras that cost one line each:
- An
aria-labelcan make the number clearer to screen readers, which sometimes read “zero six twelve…” in a rather unnatural way:<a href="tel:+33612345678" aria-label="Appeler le 06 12 34 56 78">06 12 34 56 78</a>. - For a company site, the
telephoneproperty of Schema.org markup (OrganizationorLocalBusiness) gives search engines the number in international format, independently of how it is displayed:"telephone": "+33123456789".
Summary
| Goal | Code |
|---|---|
| Clickable number | <a href="tel:+33612345678">06 12 34 56 78</a> |
| Pre-filled SMS | <a href="sms:+33612345678?body=Bonjour">…</a> |
<a href="https://wa.me/33612345678">…</a> | |
| Block automatic detection | <meta name="format-detection" content="telephone=no"> in the head |
The phone link is a special case of the a tag; the other attributes and URL schemes are detailed in 20 HTML5 tags worth knowing.
Common errors
href="tel:06 12 34 56 78" works on some devices and not on others. The href contains only digits, the + and, at most, hyphens; the formatting stays in the link text.tel:0612345678 dials nothing useful from abroad. Always write +33 and drop the leading 0.
