Crear enlaces en HTML

Bienvenido a la nave de HTML Masters, en este artículo te explicamos todo lo que debes aprender para crear enlaces en HTML.

¡Despegamos!

¿Qué son los enlaces en HTML?

Los enlaces HTML son elementos que permiten al usuario navegar por la web, dirigiéndole a una página que pertenezca al propio sitio web o un recurso externo. Si quieres ahondar más en el concepto de enlace HTML, te recomendamos el artículo destinado a ello.

¿Cómo poner un enlace en HTML?

El código HTML para añadir un enlace a otra página se basa en las etiquetas <a></a>. En el contenido de estas etiquetas se define el texto del enlace (llamado anchor text) y se emplea un atributo href para indicar la dirección a la que apunta el enlace. Por ejemplo:

<a href="https://htmlmasters.tech">Pincha aquí</a>

El código anterior sirve para añadir un enlace que dirige hacia la página principal de HTML Masters con el texto «Pincha aquí».

¿Cómo hacer enlaces internos y externos en HTML?

En HTML se pueden realizar enlaces internos y externos de la misma manera, simplemente hay que añadir la URL de destino en el atributo href. Sin embargo, es cierto que se pueden crear enlaces internos empleando rutas relativas, algo que no es posible con los enlaces internos.

¿Cómo poner enlaces relativos en HTML?

Los enlaces relativos se pueden utilizar únicamente para crear enlaces internos, es decir, para enlazar a páginas que pertenecen al mismo dominio desde el que se está enlazando.

Se realizan omitiendo del enlace el protocolo web y el dominio. Sería posible crear un enlace relativo hacia esta entrada de blog de la siguiente manera:

<a href="/crear-enlaces-html">Pincha aquí</a>

Se utilizan habitualmente para enlazar a la página principal del sitio web. En estos casos, basta con añadir como valor del atributo href un slash (/). Por ejemplo:

<a href="/">Pincha aquí</a>

¿Cómo poner enlaces absolutos en HTML?

Basta con añadir la URL completa del recurso al que se está enlazando para que se considere que el enlace es absoluto.

Ejemplos de uso de enlaces HTML

A continuación te muestro algunos ejemplos cotidianos y peculiaridades de los enlaces HTML.

Enlaces HTML a números de teléfono

Es muy habitual añadir enlaces a números de teléfono. Ello permite que los usuarios de dispositivos móviles puedan llamar al número de teléfono que corresponda haciendo clic en el enlace. Por ejemplo:

<a href="tel:123456789">Llamar</a>

Según el ejemplo anterior, se mostrará en pantalla un enlace con el texto «Llamar» que permitirá que el usuario llame al número «123456789» al hacer clic en el mismo. Como se puede observar, lo característico de estos enlaces es que deben llevar los caracteres tel: precediendo al número de teléfono.

Enlaces HTML a correos electrónicos

Es posible también crear enlaces en HTML de tipo email. Permiten abrir el gestor de correo del usuario y añadir la dirección de correo deseada en el campo de envío. Son similares a los anteriores, pero para crearlos es necesario emplear el comando mailto:. Por ejemplo:

<a href="mailto:contacto@htmlmasters.tech">Correo electrónico</a>

Estos enlaces pueden ser más complejos. Además de indicar la dirección del destinatario de correo, es posible definir en ellos un mensaje predeterminado, el asunto o direcciones de correo adicionales que se ponen como copia normal o copia oculta.

Hay herramientas que lo permiten como esta. Gracias a ella, es posible crear enlaces HTML de tipo email como este:

<a href="mailto:contacto@htmlmasters.tech?cc=prueba1@hmtlmasters.tech&bcc=prueba2@hmtlmasters.tech&subject=Asunto&body=Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit%2C%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%2C%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.">Enviar mensaje</a>

Enlaces HTML a Google Maps

También es posible crear enlaces hacia ubicaciones de Google Maps. En este caso, lo complicado es obtener la ruta del enlace, ya que la creación del mismo en HTML no tiene ningún misterio.

Para ello, accede a Google Maps y busca la ubicación que quieres compartir a través de tu enlace HTML. Para este caso, voy a buscar la Plaza de la Virgen Blanca de Vitoria-Gasteiz:

A continuación, es necesario pulsar el botón de compartir y a continuación el de «Copiar enlace».

Por último, basta con añadir la URL copiada como valor del atributo href del enlace HTML. Por ejemplo:

<a href="https://goo.gl/maps/RBj3EuYWfNzvxnaV6">Visítanos</a>

Enlaces HTML a Whatsapp

Para crear un link HTML hacia Whatsapp, debes añadir al atributo href el comando https://wa.me/ seguido del código del país (sin el signo +) y el número de teléfono al que se está enlazando. Por ejemplo, para añadir un link en HTML que abra una conversación de Whatsapp al número 123456789, suponiendo que es un número español que tiene el prefijo +34, se podría emplear el siguiente código:

<a href="https://wa.me/34123456789">Whatsapp</a>

Links HTML de descarga

Por último, comentar que también es posible crear un enlace HTML para descargar un determinado archivo. En el siguiente ejemplo se muestra el código necesario para descargar el logo de HTML Masters:

<a href="/wp-content/uploads/logo_small.png" download>Descargar imagen</a>

Como se puede apreciar, es necesario añadir el atributo download al enlace HTML.

Abrir links en otra pestaña

Si quieres que tus enlaces HTML se abran en una nueva pestaña, te recomendamos visitar el artículo que creamos explicando todo lo que debes saber sobre la temática.

Conclusión

Ya has aprendido cómo crear enlaces en HTML y a usarlos para diferentes propósitos: trabajar el enlace interno de tu web, referenciar páginas externas, descargar archivos y crear links a números de teléfono, cuentas de correo y chats de Whatsapp.

Espero que te haya servido de ayuda.

¡Nos vemos pronto!