Comment ajouter des liens vers des numéros de téléphone

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Add Telephone Number Links With HTML5.

Jusqu'à aujourd'hui, les numéros de téléphone présents dans les pages web étaient ajoutés en tant que texte simple (statique) et n'offraient donc aucune interaction pour les visiteurs. Le nombre de possesseurs de smartphone et donc d'utilisateurs du web via un téléphone étant en augmentation constante, il est temps de changer ces numéros de téléphone pour des zones cliquables afin de pouvoir directement appeler ledit numéro par un simple clic.

En effet à l'heure actuelle, on est obligé de copier le numéro de téléphone qui nous intéresse dans la page, puis de le recopier dans l'interface d'appel du téléphone.

Avec cette nouvelle fonctionnalité, on va pouvoir créer des liens à partir de numéros de téléphone de la même façon que l'on crée des liens à partir d'adresses e-mail.

Pour permettre aux visiteurs de directement envoyer un e-mail en cliquant sur une adresse depuis une page web, on utilise un lien classique dans lequel on place mailto : dans l'attribut href.

<a href="mailto:example@example.com">Example Email</a>

Après avoir cliqué sur ce lien, le client de messagerie par défaut s'ouvre avec un nouvel e-mail dont le champ destinataire est rempli à partir de l'adresse spécifiée dans l'attribut href du lien.

Suivant ce modèle, pour créer un lien cliquable vers un numéro de téléphone, il faut utiliser tel: dans l'attribut href du lien en précisant le numéro à appeler.

Book now, call <a href="tel:01234567890">01234 567 890</a>

Il est également possible de créer un lien cliquable qui utilisera Skype pour appeler le numéro de téléphone renseigné dans le lien (à partir d'un ordinateur de bureau par exemple).

Pour ce faire, il suffit de remplacer la valeur tel par callto dans l'attribut href du lien.

Book now, call <a href="callto:01234567890">01234 567 890</a>

Nous avons vu dans ce tutoriel comment rendre interactifs les numéros de téléphone présents dans les pages web. La croissance des visiteurs utilisant des smartphones étant en constante augmentation, cette nouveauté disponible avec HTML 5 vous permet de rendre vos pages web plus attrayantes pour ces utilisateurs.

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.