Cómo crear un enlace HTML para llamar por teléfono: código, botones y ejemplos

<a href="tel:+34900123456">Llamar al 900 123 456</a>

El número anterior es ilustrativo; sustitúyelo por un teléfono autorizado de tu empresa.

¿Qué es un enlace tel: y para qué sirve?

Un enlace tel: es una dirección especial que indica al dispositivo que el destino es un teléfono. No dirige a una página HTTP: abre el marcador o una aplicación capaz de gestionar llamadas. En móviles suele ser inmediato; en ordenadores depende de que exista una aplicación configurada.

Resulta útil en páginas de contacto, cabeceras móviles, fichas de negocio y botones de asistencia. Para una empresa que quiere recibir llamadas desde búsquedas locales, reducir el paso de copiar el número a marcarlo mejora la facilidad de contacto.

Formato recomendado del número

Para webs con usuarios de distintos países usa el prefijo internacional en el atributo href, sin espacios decorativos. Puedes mostrar el número con espacios para facilitar la lectura.

<a href="tel:+34900123456">900 123 456</a>
<a href="tel:+34600111222">+34 600 111 222</a>

Ejemplos de enlace HTML para teléfono

1. Enlace en el texto

Es la opción más sencilla: funciona sin JavaScript y los lectores de pantalla pueden identificarlo como enlace.

<p>¿Necesitas ayuda? <a href="tel:+34900123456">Llámanos</a>.</p>

2. Botón de llamada con CSS

Un enlace puede verse como botón. Sigue siendo un <a>, porque su acción es navegar a un esquema telefónico, no enviar un formulario.

<a class="boton-llamada" href="tel:+34900123456">
  Llamar ahora: 900 123 456
</a>

<style>
.boton-llamada {
  display: inline-block;
  padding: .85rem 1.15rem;
  border-radius: .75rem;
  background: #15304a;
  color: white;
  font-weight: 700;
  text-decoration: none;
}
.boton-llamada:focus-visible {
  outline: 3px solid #77c94d;
  outline-offset: 3px;
}
</style>

3. Enlace accesible con texto contextual

Evita enlaces que solo digan «clic aquí». Un texto como «Llamar al equipo de soporte» explica su función incluso fuera del contexto visual.

<a href="tel:+34900123456" aria-label="Llamar al equipo de soporte: 900 123 456">
  Contactar por teléfono
</a>

Generador de enlaces tel: para HTML

Introduce el teléfono de tu empresa con prefijo internacional. El código se genera en tu propio navegador; Talestin no guarda el número.

Diseño, accesibilidad y medición de llamadas

• Texto reconocible: muestra que se va a iniciar una llamada y, cuando sea útil, el número.
• Zona táctil cómoda: evita enlaces diminutos o pegados a otros controles.
• Contraste y foco: destaca el botón y permite navegar con teclado.
• Medición: puedes registrar clics en enlaces tel: desde tu analítica, pero un clic no demuestra que se completó la llamada.
• Contexto: indica el horario o alternativa de contacto cuando proceda.

Errores frecuentes al crear enlaces telefónicos

Preguntas frecuentes