Uso de enlaces en HTML

Los enlaces son uno de los bloques fundamentales de la web. Permiten conectar páginas, acceder a fuentes externas, enviar correos electrónicos o habilitar descargas.

Crear un enlace básico

El enlace más simple es una etiqueta <a> que usa el atributo href para especificar la URL de destino. El texto del enlace va entre la etiqueta de apertura y la de cierre.

<a href="https://www.example.com">Visit Example</a>

Abrir enlaces en una nueva pestaña

El atributo target="_blank" abre el enlace en una nueva pestaña o ventana del navegador. Esto es útil para páginas externas.

<a href="https://www.example.com" target="_blank">Open in new tab</a>

Enlaces internos

Para enlaces internos, el href apunta a un archivo local o a una ruta dentro del mismo sitio web.

<a href="/about.html">About Us</a>

Enlaces de correo electrónico

Un enlace de correo electrónico comienza con el prefijo mailto: seguido de la dirección de correo electrónico.

<a href="mailto:[email protected]">Email us</a>

Enlaces con apariencia de botones

Un elemento <a> puede estilizarse con CSS para que se vea como un botón. Esta es una técnica común para botones de llamada a la acción (CTA).

<a href="/contact.html" style="display: inline-block; padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 4px;">
  Contact Us
</a>

El atributo rel

Al abrir un enlace en una nueva pestaña, se recomienda incluir rel="noopener noreferrer" para mejorar la seguridad del navegador.

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">Secure External Link</a>

Resumen

Los enlaces son herramientas simples pero poderosas en HTML. Pueden usarse para navegar entre páginas, activar descargas, enlazar a correos electrónicos o construir la navegación del sitio. Atributos como href, target y rel te ayudan a personalizar su comportamiento y apariencia.