Enlace de teléfono en HTML: tel: clicable y format-detection

Un número de teléfono en una página web plantea dos preguntas opuestas. La primera: ¿cómo hacerlo clicable para que un visitante desde el móvil lance la llamada con un gesto? La segunda: ¿cómo impedir que ciertos navegadores lo conviertan ellos solos en un enlace, con un estilo que no controlas? La respuesta a la primera es el enlace tel:; la respuesta a la segunda, la etiqueta meta format-detection, tema original de este artículo. Aquí tienes las dos, en el orden en que hacen falta.

Crear un enlace de teléfono clicable

El esquema de URL tel:, definido por la RFC 3966, le indica al navegador que una pulsación debe marcar un número. En un smartphone se abre la aplicación Teléfono con el número ya escrito; en un ordenador, el sistema propone una aplicación de telefonía si la tiene (FaceTime, Teams, Skype) y, si no, no pasa nada.

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

Tres reglas para un enlace que funcione en todas partes:

• Formato internacional en el href: +33 seguido del número sin el 0 inicial. Un número nacional no se marca correctamente desde el extranjero ni desde ciertas aplicaciones.
• Ningún espacio ni punto en el href. La RFC permite los guiones y los puntos como separadores visuales, pero no todos los dispositivos los toleran: lo más seguro es una serie de cifras. El formato legible (06 12 34 56 78) va en el texto del enlace.
• El número en claro dentro del texto. Un icono a secas no le sirve ni a quien lee la página en un ordenador sin telefonía ni a un lector de pantalla.

Para un número con extensión, la RFC prevé el parámetro ext: tel:+33123456789;ext=204. El soporte de las aplicaciones es desigual; indica también la extensión en el texto.

Buenas prácticas de visualización

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

/* En pantalla grande, donde la llamada directa es poco probable, se puede neutralizar el aspecto del enlace */
@media (min-width: 64rem) {
  a.tel {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }
}

La regla CSS es una decisión editorial, no una obligación: un ordenador con una aplicación de telefonía puede llamar perfectamente. Muchos sitios dejan el enlace activo en todas partes.

Enlace SMS y enlace de WhatsApp

El mismo principio se aplica a los mensajes. El esquema sms: abre la aplicación de mensajería; el parámetro body rellena el texto por adelantado (codifica los espacios y los caracteres especiales).

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

WhatsApp ofrece un enlace universal, wa.me, seguido del número internacional sin + ni ceros:

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

En el móvil abre la aplicación; en el ordenador, WhatsApp Web. Que los enlaces sms: y wa.me se abran depende de las aplicaciones instaladas: pon siempre el número en claro al lado.

Impedir la detección automática de los números

Es el problema inverso y el tema original de este artículo. Algunos entornos detectan las series de cifras que se parecen a un número de teléfono y las convierten ellos solos en enlaces tel:, subrayados y de color, sin que tu HTML lo haya pedido. Una referencia de producto, un código postal seguido de un número de calle o un identificador pueden convertirse así en «números» clicables y romperte la maquetación.

Quién detecta qué hoy en día:

• Safari en iPhone y iPad: detección activa por defecto en todas las páginas.
• Las WebViews de las aplicaciones móviles (y algunos navegadores Android): comportamiento variable, a menudo activo.
• Los clientes de correo: Apple Mail y la aplicación Mail de iOS detectan números, fechas y direcciones en los correos HTML.
• El antiguo Microsoft Edge (motor EdgeHTML, 2015-2020), asociado a Skype, convertía los números en Windows 10: era el caso descrito en la primera versión de este artículo. El Edge actual, basado en Chromium, ya no lo hace en el escritorio, ni tampoco Chrome o Firefox.

La etiqueta que desactiva ese comportamiento se coloca en el head:

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

A partir de ahí, el navegador ya no crea ningún enlace de teléfono por su cuenta en la página y solo siguen siendo clicables tus enlaces tel: explícitos. Es la combinación recomendada: la detección automática desactivada y cada número que quieras hacer clicable etiquetado a mano, con el formato internacional correcto. Mantienes el control del estilo y evitas los falsos positivos.

En un correo HTML

El caso más frecuente hoy ya no es la página web, sino el correo: una referencia de pedido o un importe se convierte en un enlace azul en Apple Mail. La misma etiqueta, en el head del mensaje, resuelve el problema. Para los clientes que la ignoran, un truco extendido consiste en envolver el número en un enlace del mismo color que el texto, lo que fija el estilo en lugar de dejárselo al cliente.

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

Accesibilidad y datos estructurados

Dos complementos que cuestan una línea cada uno:

• Un aria-label puede dejar el número más claro para los lectores de pantalla, que a veces leen «cero seis doce…» de forma poco natural: <a href="tel:+33612345678" aria-label="Appeler le 06 12 34 56 78">06 12 34 56 78</a>.
• Para un sitio de empresa, la propiedad telephone del marcado Schema.org (Organization o LocalBusiness) da el número a los motores de búsqueda en formato internacional, con independencia de cómo se muestre: "telephone": "+33123456789".

Resumen

El enlace de teléfono es un caso particular de la etiqueta a; el resto de atributos y esquemas de URL están detallados en 20 etiquetas HTML5 que hay que conocer.