Cómo poner un enlace en HTML

Si estás haciendo una página web, aprender a crear links o hipervínculos es clave para estructurar correctamente tu sitio y definir la arquitectura web. En esta guía, te enseñaré cómo poner enlaces en HTML, desde los más básicos hasta los más avanzados, incluyendo enlaces a otras páginas, secciones dentro de la misma página, correos electrónicos, teléfonos ¡y hasta el WhatsApp!.

Cómo poner enlaces en HTML

En HTML, los enlaces se crean con la etiqueta <a>, que significa "ancla" (anchor en inglés). Esta etiqueta se usa para conectar páginas web, documentos, correos electrónicos y más.

Ejemplo de código

<a href="URL">Texto del enlace</a>

En este caso:

Así pues, si yo quiero enlazar a la URL de "https://sergiocanales.com/seo-para-principiantes/" con el texto ancla "aprender SEO desde cero" escribiría el siguiente código:

<a href="https://sergiocanales.com/seo-para-principiantes/">aprender SEO desde cero</a>

Resultado

aprender SEO desde cero

Agregar link en HTML otra página web

El ejemplo que hemos visto arriba nos permite enlazar hacia otra página web ya que estamos indicando la URL completa. Para comprenderlo mejor, te dejo aquí otro ejemplo

<a href="https://www.youtube.com/channel/UCdaDEYcL4ZKRFB4pJBkxTrA">Mi canal de Youtube</a>

Agregar link en HTML tu página web

Si lo que quieres es enlazar dentro de tu página web, no hace falta que indiques la URL completa, es decir, con su dominio, sino que con indicar la relativa o local es suficiente. Así pues, en el primer ejemplo, podríamos escribir lo de abajo y seguiría funcionando perfectamente:

<a href="/seo-para-principiantes/">aprender SEO desde cero</a>

Agregar link en HTML hacia una sección específica

Hay ocasiones en las que no queremos enviar al usuario a una sección concreta dentro de la misma de la URL o en otra. Esto lo creamos jumplinks al poner un anclaje en HTML.

Ejemplo de ancla dentro de la misma página

<a href="URL">Texto del enlace</a>

Ejemplo de ancla hacia otra página

<a href="/como-poner-negrita-cursiva-y-subrayado-en-html/#negrita_en_html">poner negritas en HTML</a>

Con el enlace de arriba lo que hacemos es enviar al lector hacia la página que explica cómo poner negritas en HTML, pero no a la parte inicial sino a la sección en concreto donde se detalla la parte de las negritas.

Otros hipervínculos en HTML que te aconsejo conocer

Además de los 3 casos que ya hemos visto, vamos a ver cómo poner un link en HTML que no apunte a una página web sino a otro tipo de recurso.

Cómo agregar un link hacia un correo

Si quieres que un clic en el enlace abra tu herramienta de correo predeterminada, usa mailto:

Ejemplo de código

<a href="mailto:soy@sergiocanales.com">envíame un correo</a>

Cómo insertar un link hacia un teléfono

Si quieres que un clic en el enlace redirija hacia la aplicación de llamadas del lector, usa tel:

Ejemplo de código

<a href="tel:680202688">llámame cuando quieras</a>

Cómo insertar un link hacia WhatsApp

Si quieres que un clic en el enlace redirija hacia la WhatsApp de llamadas del lector, usa tel:

Ejemplo de código

<a href="https://wa.me/680202688">mándame un whatsapp mejor</a>

De hecho puedes programas un mensaje predefinido:

Ejemplo de código

<a href="https://wa.me/680202688?text=Hola%20quiero%20más%20información">mándame un whatsapp mejor</a>

Cómo insertar un link hacia FTP

Por último, si necesitas crear un enlace para acceder a un servidor FTP desde una página web, puedes hacerlo usando el esquema ftp:// dentro del atributo href de un enlace <a>.

Ejemplo de código

<a href="ftp://ftp.ejemplo.com">accede aquí al FTP</a>

En este caso, y si el servidor lo permite, el navegador abrirá el contenido del FTP.

De hecho, con este hiper vínculo puedes abrir directamente un archivo:

Ejemplo de código

<a href="ftp://ftp.ejemplo.com/auditoria-SEO.pdf">Descarga aquí mi auditoría SEO</a>

Y de igual forma, puedes incluir las credenciales en el enlace, aunque esto no es recomendable por seguridad.

Ejemplo de código

<a href="ftp://usuario:contraseña@ftp.ejemplo.com">accede aquí al FTP</a>

Atributos de los enlaces

Aunque parecía que ya habíamos terminado nos queda por ver un par de detalles para modificar nuestros hipervínculos en HTML. Si te lo estabas preguntado, en efecto, te estoy hablando de los famosos atributos de los enlaces.

Para que te familiarices con ellos, aquí te dejo una tabla con los atributos más importantes para los enlaces en HTML y su función:

Atributo	Función	Ejemplo
href	Define la URL del enlace.	<a href="https://www.ejemplo.com">Ir a Ejemplo</a>
target	Controla dónde se abrirá el enlace.	<a href="https://www.ejemplo.com" target="_blank">Abrir en nueva pestaña</a>
rel	Especifica la relación con la página enlazada (seguridad, SEO, etc.).	<a href="https://www.ejemplo.com" rel="nofollow">Enlace sin seguimiento</a>
title	Muestra un texto emergente al pasar el cursor sobre el enlace.	<a href="https://www.ejemplo.com" title="Visita nuestro sitio">Ir a Ejemplo</a>
download	Permite descargar un archivo en lugar de abrirlo.	<a href="documento.pdf" download>Descargar PDF</a>
mailto:	Crea un enlace para enviar un correo electrónico.	<a href="mailto:correo@ejemplo.com">Enviar correo</a>
tel:	Permite hacer llamadas desde un enlace en dispositivos móviles.	<a href="tel:+123456789">Llamar ahora</a>

Vamos a ver un ejemplo para que lo comprendas bien:

Ejemplo de código

<a href="https://www.linkedin.com/in/sergio-jimenez-canales-65690269/" target="_blank" rel="noopener noreferrer" title="visita mi linkedin">ir a linkedin</a>

Vamos a ver cada uno de estos atributos:

Si no quieres que la página se abra en otra pestaña no hace falta que indiques nada aunque el valor sería _self. Aunque recuerda que si la página se abre en tu propia pestaña y tienes AdSense en tu web, te dará más dinero por el anuncio viñeta.