HTML5 – Números de teléfono

Veamos cómo enlazar los números de teléfono en HTML5 para que el usuario, al pulsarlo en un móvil, se ejecute la llamada de teléfono.

Tutorailes programación web

Muchas veces, al hacer una página ‘responsive’ ponemos en nuestro código un teléfono. HTML5, sobretodo en los navegadores de móviles, pueden hacer que este teléfono sea clicable para hacer la llamada directamente o añadir el teléfono a los contactos.

Código HTML5 para hacer un teléfono clicable

Al igual que cuando indicamos un email etiquetamos de la siguiente manera:

<a href="mailto:miemail@email.com">miemail@miemail.com</a>

Con el teléfono podemos marcarlo como:

<a href="tel:977650001">977650001</a>

La diferencia está en el contenido del atributo href. Ponemos mailto: en el caos de querer enlazar un email, y un tel: si queremos enlazar un teléfono. El resultado es el mismo, al pulsar se abrirá el software predeterminado que haya en nuestra máquina para trabajar con ese tipo de enlace (teléfono o email).

Atento a los puntos, comas y guiones. No los pongáis en el atributo href.

También se puede enlazar a otros servicios para contactar. Para ello, hemos creado un artículo mucho más completo:

O más detalladamente un artículo sobre Whatsapp

Sencillo, no? Pues es muy efectivo para webs que sean visitadas desde dispositivos móviles. Y tan sencillo como etiquetar un texto con el formato que os he indicado para tener en HTML5 los números de teléfono clicables.


Más información