Lien téléphone en HTML : créer un lien tel: cliquable et désactiver la détection automatique des numéros

Un numéro de téléphone sur une page web pose deux questions opposées. La première : comment le rendre cliquable, pour qu’un visiteur sur mobile lance l’appel d’un geste ? La seconde : comment empêcher certains navigateurs de le transformer eux-mêmes en lien, avec un style que vous ne contrôlez pas ? La réponse à la première est le lien tel:, la réponse à la seconde, la balise meta format-detection, sujet d’origine de cet article. Voici les deux, dans l’ordre où l’on en a besoin.

Créer un lien téléphone cliquable

Le schéma d’URL tel:, défini par la RFC 3966, indique au navigateur qu’un clic doit composer un numéro. Sur un smartphone, l’application Téléphone s’ouvre avec le numéro prérempli, sur un ordinateur, le système propose une application de téléphonie s’il en a une (FaceTime, Teams, Skype), sinon il ne se passe rien.

<a href="tel:+33612345678">06 12 34 56 78</a>

Trois règles pour un lien qui fonctionne partout :

• Format international dans le href : +33 suivi du numéro sans le 0 initial. Un numéro national ne se compose pas correctement depuis l’étranger ni depuis certaines applications.
• Aucun espace ni point dans le href. La RFC autorise les tirets et les points comme séparateurs visuels, mais tous les appareils ne les tolèrent pas : le plus sûr est une suite de chiffres. La mise en forme lisible (06 12 34 56 78) va dans le texte du lien.
• Le numéro en clair dans le texte. Une icône seule ne sert ni à celui qui lit la page sur un ordinateur sans téléphonie, ni à un lecteur d’écran.

Pour un numéro avec poste, la RFC prévoit le paramètre ext : tel:+33123456789;ext=204. La prise en charge par les applications est inégale, indiquez le poste dans le texte également.

Bonnes pratiques d’affichage

<p>
  Service client :
  <a href="tel:+33123456789" class="tel">01 23 45 67 89</a>
  (du lundi au vendredi, 9 h à 18 h)
</p>

/* Sur grand écran, où l'appel direct est improbable, on peut neutraliser l'apparence du lien */
@media (min-width: 64rem) {
  a.tel {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }
}

La règle CSS est un choix éditorial, pas une obligation : un ordinateur équipé d’une application de téléphonie peut très bien appeler. Beaucoup de sites gardent le lien actif partout.

Lien SMS et lien WhatsApp

Le même principe s’applique aux messages. Le schéma sms: ouvre l’application de messagerie, le paramètre body préremplit le texte (encodez les espaces et les caractères spéciaux).

<a href="sms:+33612345678">Envoyer un SMS</a>
<a href="sms:+33612345678?body=Bonjour%2C%20je%20souhaite%20un%20devis">SMS avec message</a>

WhatsApp fournit un lien universel, wa.me, suivi du numéro international sans + ni zéros :

<a href="https://wa.me/33612345678?text=Bonjour" rel="noopener" target="_blank">Écrire sur WhatsApp</a>

Sur mobile, il ouvre l’application, sur ordinateur, WhatsApp Web. L’ouverture des liens sms: et wa.me dépend des applications installées : prévoyez toujours le numéro en clair à côté.

Empêcher la détection automatique des numéros

C’est le problème inverse, et le sujet d’origine de cet article. Certains environnements repèrent les suites de chiffres qui ressemblent à un numéro de téléphone et les transforment d’eux-mêmes en liens tel:, soulignés, colorés, sans que votre HTML ne l’ait demandé. Une référence produit, un code postal suivi d’un numéro de rue, un identifiant peuvent ainsi devenir des « numéros » cliquables et casser votre mise en page.

Qui détecte quoi, aujourd’hui :

• Safari sur iPhone et iPad : détection active par défaut sur toutes les pages.
• Les WebViews des applications mobiles (et certains navigateurs Android) : comportement variable, souvent actif.
• Les clients de messagerie : Apple Mail et l’application Mail iOS détectent numéros, dates et adresses dans les e-mails HTML.
• L’ancien Microsoft Edge (moteur EdgeHTML, 2015-2020), associé à Skype, transformait les numéros sur Windows 10 : c’était le cas décrit dans la première version de cet article. L’Edge actuel, basé sur Chromium, ne le fait plus sur le bureau, pas plus que Chrome ou Firefox.

La balise qui désactive ce comportement se place dans le head :

<head>
  <meta charset="UTF-8">
  <meta name="format-detection" content="telephone=no">
  …
</head>

À partir de là, le navigateur ne crée plus aucun lien téléphone de lui-même sur la page, et seuls vos liens tel: explicites restent cliquables. C’est la combinaison recommandée : la détection automatique désactivée, et chaque numéro que vous voulez rendre cliquable balisé à la main, avec le bon format international. Vous gardez le contrôle du style et vous évitez les faux positifs.

Dans un e-mail HTML

Le cas le plus fréquent aujourd’hui n’est plus la page web mais l’e-mail : une référence de commande ou un montant devient un lien bleu dans Apple Mail. La même balise, dans le head du message, règle le problème. Pour les clients qui l’ignorent, une astuce répandue consiste à envelopper le numéro dans un lien de la même couleur que le texte, ce qui fixe le style au lieu de le laisser au client.

<a href="#" style="color: #333333; text-decoration: none;">Commande n° 2026 0907 4512</a>

Accessibilité et données structurées

Deux compléments qui coûtent une ligne chacun :

• Un aria-label peut rendre le numéro plus clair aux lecteurs d’écran, qui lisent parfois « zéro six douze … » de façon peu naturelle : <a href="tel:+33612345678" aria-label="Appeler le 06 12 34 56 78">06 12 34 56 78</a>.
• Pour un site d’entreprise, la propriété telephone du balisage Schema.org (Organization ou LocalBusiness) donne le numéro aux moteurs de recherche au format international, indépendamment de l’affichage : "telephone": "+33123456789".

Récapitulatif

Le lien téléphone est un cas particulier de la balise a, les autres attributs et schémas d’URL sont détaillés dans 20 balises HTML5 à connaître.