Enlaces en HTML

Los enlaces son uno de los elementos más importantes de la web. Son los que permiten navegar entre diferentes páginas y recursos, creando la experiencia de navegación que conocemos.

La etiqueta <a>

La etiqueta <a> (de anchor, ancla en inglés) es la etiqueta que se utiliza para crear enlaces en HTML.

Atributos de la etiqueta <a>

Los atributos más importantes de la etiqueta <a> son:

• href: la URL o destino del enlace (obligatorio)
• target: dónde se abrirá el enlace
• rel: relación entre la página actual y la página enlazada

Ejemplo básico

<a href="https://www.google.com">Ir a Google</a>

Este es el uso más básico de un enlace. Al hacer clic en el texto “Ir a Google”, el navegador navegará a la URL especificada en el atributo href.

El atributo target

El atributo target indica dónde se abrirá el enlace. Los valores más comunes son:

• _self: abre el enlace en la misma pestaña (valor por defecto)
• _blank: abre el enlace en una nueva pestaña o ventana

<a href="https://www.google.com" target="_blank"> Abrir Google en nueva pestaña </a>

Importante: Cuando uses target="_blank", es recomendable usar también rel="noopener noreferrer" por razones de seguridad y rendimiento.

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">  Abrir Google en nueva pestaña</a>

• noopener: previene que la nueva página tenga acceso al objeto window.opener, mejorando la seguridad.
• noreferrer: previene que se envíe la información del referente (la URL de la página actual) a la nueva página.

Enlaces relativos y absolutos

Enlaces absolutos

Un enlace absoluto incluye la URL completa, con el protocolo y el dominio:

<a href="https://www.ejemplo.com/pagina.html">Enlace absoluto</a>

Enlaces relativos

Un enlace relativo es relativo a la ubicación actual de la página:

<!-- Enlace a una página en el mismo directorio --><a href="contacto.html">Contacto</a><!-- Enlace a una página en un subdirectorio --><a href="blog/articulo.html">Artículo</a><!-- Enlace a una página en el directorio padre --><a href="../index.html">Volver al inicio</a>

Enlaces a secciones de la misma página

Puedes crear enlaces que lleven a secciones específicas de la misma página usando el atributo id:

<!-- Definir la sección con un id --><section id="sobre-nosotros">  <h2>Sobre nosotros</h2>  <p>Contenido...</p></section><!-- Enlace a esa sección --><a href="#sobre-nosotros">Ir a Sobre nosotros</a>

El símbolo # indica que es un enlace a un elemento con ese id en la página actual.

Enlaces de correo electrónico

Puedes crear enlaces que abran el cliente de correo del usuario:

<a href="mailto:contacto@ejemplo.com">Enviar email</a>

También puedes pre-rellenar el asunto y el cuerpo del mensaje:

<a href="mailto:contacto@ejemplo.com?subject=Consulta&body=Hola, tengo una pregunta">  Enviar email con asunto</a>

Enlaces de teléfono

Para dispositivos móviles, puedes crear enlaces que permitan llamar directamente:

<a href="tel:+34123456789">Llamar al teléfono</a>

Enlaces para descargar archivos

El atributo download indica que el enlace es para descargar un archivo en lugar de navegar a él:

<a href="documento.pdf" download>Descargar PDF</a>

Puedes especificar un nombre diferente para el archivo descargado:

<a href="documento.pdf" download="mi-documento.pdf">Descargar PDF</a>

Estilizando enlaces con CSS

Los enlaces tienen diferentes estados que puedes estilizar:

/* Enlace normal */a {  color: blue;  text-decoration: none;}/* Enlace visitado */a:visited {  color: purple;}/* Enlace al pasar el mouse */a:hover {  color: darkblue;  text-decoration: underline;}/* Enlace activo (mientras se hace clic) */a:active {  color: red;}

Buenas prácticas

1. Texto descriptivo: El texto del enlace debe describir claramente hacia dónde lleva

<!-- ❌ Mal --><a href="articulo.html">Haz clic aquí</a><!-- ✅ Bien --><a href="articulo.html">Leer más sobre desarrollo web</a>

2. Accesibilidad: Asegúrate de que los enlaces sean accesibles para todos los usuarios

• Texto descriptivo: El texto del enlace debe ser claro y descriptivo por sí mismo. Evita textos genéricos como “haz clic aquí” o “más información”:

<!-- ❌ Mal --><a href="articulo.html">Haz clic aquí</a><!-- ✅ Bien --><a href="articulo.html">Leer más sobre desarrollo web</a>

• Enlaces con imágenes o iconos: Si un enlace solo contiene una imagen o un icono sin texto, usa aria-label para describir el destino del enlace:

<a href="documento.pdf" aria-label="Descargar documento en formato PDF">  <img src="icono-descarga.svg" alt="" /></a>

• Enlaces que abren en nueva ventana: Cuando uses target="_blank", considera añadir aria-label para indicar que se abrirá en una nueva ventana:

<a href="https://sitio-externo.com" target="_blank" rel="noopener noreferrer" aria-label="Abrir sitio externo en nueva ventana">  Sitio externo ↗</a>

3. Enlaces externos: Indica visualmente cuando un enlace lleva a un sitio externo

<a href="https://sitio-externo.com" target="_blank" rel="noopener noreferrer"> Sitio externo ↗ </a>

Los enlaces son fundamentales para crear una buena experiencia de navegación. ¡Practica creando diferentes tipos de enlaces en tu proyecto!