Een klikbaar nummer schrijf je als <a href="tel:+33612345678">06 12 34 56 78</a>: internationaal kengetal, geen spaties in de href, een leesbaar nummer in de tekst. Omgekeerd, om te voorkomen dat een browser je nummers zelf omzet in links, voeg je <meta name="format-detection" content="telephone=no"> toe aan de head en maak je je tel:-links met de hand.
Een telefoonnummer op een webpagina roept twee tegengestelde vragen op. De eerste: hoe maak je het klikbaar, zodat een bezoeker op mobiel de oproep met één gebaar start? De tweede: hoe voorkom je dat sommige browsers het zelf omzetten in een link, met een stijl die je niet zelf bepaalt? Het antwoord op de eerste vraag is de tel:-link, het antwoord op de tweede is de tag meta format-detection, het oorspronkelijke onderwerp van dit artikel. Hier zijn beide, in de volgorde waarin je ze nodig hebt.
Een klikbare telefoonlink maken
Het URL-schema tel:, vastgelegd in RFC 3966, vertelt de browser dat een klik een nummer moet bellen. Op een smartphone opent de Telefoon-app met het nummer al ingevuld, op een computer stelt het systeem een telefonie-app voor als het er een heeft (FaceTime, Teams, Skype), en anders gebeurt er niets.
<a href="tel:+33612345678">06 12 34 56 78</a>Drie regels voor een link die overal werkt:
- Internationaal formaat in de
href:+33gevolgd door het nummer zonder de beginnende 0. Een nationaal nummer belt niet correct vanuit het buitenland of vanuit sommige apps. - Geen spaties of punten in de
href. De RFC staat streepjes en punten toe als visuele scheidingstekens, maar niet elk apparaat accepteert ze: het veiligst is een reeks cijfers zonder opmaak. De leesbare opmaak (06 12 34 56 78) komt in de linktekst. - Het nummer voluit in de tekst. Een icoon alleen heeft niets aan wie de pagina leest op een computer zonder telefonie, of aan een schermlezer.
Voor een nummer met een toestel voorziet de RFC de parameter ext: tel:+33123456789;ext=204. De ondersteuning door apps is wisselend, vermeld het toestelnummer daarom ook in de tekst.
Goede praktijken voor de weergave
<p>
Service client :
<a href="tel:+33123456789" class="tel">01 23 45 67 89</a>
(du lundi au vendredi, 9 h à 18 h)
</p>/* Op grote schermen, waar direct bellen onwaarschijnlijk is, kun je het uiterlijk van de link neutraliseren */
@media (min-width: 64rem) {
a.tel {
color: inherit;
text-decoration: none;
pointer-events: none;
}
}De CSS-regel is een redactionele keuze, geen verplichting: een computer met een telefonie-app kan prima bellen. Veel sites houden de link overal actief.
Sms-link en WhatsApp-link
Hetzelfde principe geldt voor berichten. Het schema sms: opent de berichten-app, de parameter body vult de tekst alvast in (codeer spaties en speciale tekens).
<a href="sms:+33612345678">Envoyer un SMS</a>
<a href="sms:+33612345678?body=Bonjour%2C%20je%20souhaite%20un%20devis">SMS avec message</a>WhatsApp biedt een universele link, wa.me, gevolgd door het internationale nummer zonder + of nullen:
<a href="https://wa.me/33612345678?text=Bonjour" rel="noopener" target="_blank">Écrire sur WhatsApp</a>Op mobiel opent het de app, op de computer WhatsApp Web. Of sms:– en wa.me-links openen, hangt af van de geïnstalleerde apps: zet altijd het nummer voluit erbij.
Automatische nummerdetectie voorkomen
Dit is het omgekeerde probleem, en het oorspronkelijke onderwerp van dit artikel. Sommige omgevingen herkennen reeksen cijfers die op een telefoonnummer lijken en zetten ze vanzelf om in onderstreepte, gekleurde tel:-links, zonder dat je HTML daarom heeft gevraagd. Een productreferentie, een postcode gevolgd door een huisnummer, of een ID kunnen zo klikbare “nummers” worden en je lay-out breken.
Wie detecteert wat, vandaag de dag:
- Safari op iPhone en iPad: detectie standaard actief op elke pagina.
- WebViews in mobiele apps (en sommige Android-browsers): wisselend gedrag, vaak actief.
- E-mailclients: Apple Mail en de iOS Mail-app detecteren nummers, datums en adressen in HTML-e-mails.
- De oude Microsoft Edge (EdgeHTML-engine, 2015-2020), gekoppeld aan Skype, zette nummers om op Windows 10: dat was het geval dat de eerste versie van dit artikel beschreef. De huidige Edge, gebaseerd op Chromium, doet dit niet meer op desktop, net zomin als Chrome of Firefox.
De tag die dit gedrag uitschakelt, plaats je in de head:
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
…
</head>Vanaf dat moment maakt de browser zelf geen enkele telefoonlink meer aan op de pagina, en blijven alleen je expliciete tel:-links klikbaar. Dat is de aanbevolen combinatie: automatische detectie uitgeschakeld, en elk nummer dat je klikbaar wilt maken met de hand gemarkeerd, in het juiste internationale formaat. Zo houd je controle over de stijl en vermijd je vals-positieven.
Je komt content="telephone=no, date=no, address=no, email=no" tegen, met name in HTML-e-mailtemplates, om te voorkomen dat Apple Mail datums en adressen onderstreept. Alleen de waarde telephone=no is door Apple gedocumenteerd, de andere worden door Safari en Mail getolereerd, zonder garantie. Ze storen browsers die ze niet kennen niet.
In een HTML-e-mail
Het vaakst voorkomende geval is tegenwoordig niet meer de webpagina maar de e-mail: een bestelreferentie of een bedrag wordt een blauwe link in Apple Mail. Dezelfde tag, in de head van het bericht, lost het probleem op. Voor clients die de tag negeren, is een veelgebruikte truc om het nummer in een link te verpakken met dezelfde kleur als de tekst, waardoor de stijl vastligt in plaats van aan de client te worden overgelaten.
<a href="#" style="color: #333333; text-decoration: none;">Commande n° 2026 0907 4512</a>Toegankelijkheid en gestructureerde data
Twee aanvullingen die elk maar één regel kosten:
- Een
aria-labelkan het nummer duidelijker maken voor schermlezers, die het soms nogal onnatuurlijk voorlezen als “nul zes twaalf …”:<a href="tel:+33612345678" aria-label="Appeler le 06 12 34 56 78">06 12 34 56 78</a>. - Voor een bedrijfssite geeft de eigenschap
telephonevan de Schema.org-markup (OrganizationofLocalBusiness) het nummer in internationaal formaat door aan zoekmachines, onafhankelijk van de weergave:"telephone": "+33123456789".
Overzicht
| Doel | Code |
|---|---|
| Klikbaar nummer | <a href="tel:+33612345678">06 12 34 56 78</a> |
| Vooraf ingevulde sms | <a href="sms:+33612345678?body=Bonjour">…</a> |
<a href="https://wa.me/33612345678">…</a> | |
| Automatische detectie blokkeren | <meta name="format-detection" content="telephone=no"> in de head |
De telefoonlink is een bijzonder geval van de tag a, de overige attributen en URL-schema’s worden behandeld in 20 HTML5-tags om te kennen.
Veelgemaakte fouten
href="tel:06 12 34 56 78" werkt op sommige toestellen en op andere niet. De href bevat alleen cijfers, het +-teken en eventueel streepjes, de opmaak blijft in de linktekst.tel:0612345678 belt niets correct vanuit het buitenland. Schrijf altijd +33 en laat de beginnende 0 weg.
