<a>

<a> (anchor, ancla) es el elemento que crea un hipervínculo: la unidad fundamental de navegación de la web. Sin <a>, cada página sería una isla; con él, las páginas se conectan entre sí y con cualquier recurso de internet. Es el elemento más antiguo y más central del HTML, y su atributo href es la columna vertebral de la web tal como existe hoy.

Lo que distingue a <a> de cualquier otro elemento es su capacidad de apuntar a cualquier tipo de destino: otra página del mismo sitio, un sitio externo, un fragmento dentro de la misma página (un índice que lleva al lector a una sección específica), un archivo para descargar, una dirección de correo, un número de teléfono. El tipo de destino lo define el valor del href; el navegador interpreta ese valor y actúa en consecuencia.

Sin href, <a> existe en el DOM pero no es un enlace navegable — es un elemento de ancla en el sentido clásico del término, un marcador al que otros pueden apuntar. Este uso es técnicamente válido pero raro. En casi todos los casos, un <a> útil lleva href. La experiencia del usuario con <a> se extiende más allá de la URL: el texto del enlace es parte del contenido semántico, y su calidad determina si el enlace es accesible y útil tanto para lectores de pantalla como para motores de búsqueda.

Cómo funciona

<a> es un elemento en línea que puede contener texto, elementos en línea (incluso imágenes), y en HTML5 también elementos de bloque (una tarjeta entera como enlace). Al hacer clic, el navegador navega al destino del href. Si no hay href, no hay navegación.

El comportamiento exacto depende del valor de href y de los atributos target y rel. El estilo visual por defecto (texto subrayado azul para :link, violeta para :visited) viene del agente de usuario y se puede sobrescribir completamente con CSS.

Modelo de contenido

<a> acepta contenido transparente (hereda el modelo del padre). En la práctica:

• Puede contener texto y elementos en línea (<strong>, <em>, <img>, <abbr>).
• En HTML5, puede contener elementos de bloque (un <div>, un <article>, una tarjeta completa), siempre que no haya otro <a> ni <button> anidado adentro.
• No puede contener otro <a> ni elementos interactivos (<button>, <input>, etc.).

Display por defecto: inline.

Sintaxis

<!-- Enlace básico externo -->
<a href="https://www.example.com">Visitar Example</a>

<!-- Enlace relativo a página del mismo sitio -->
<a href="acerca.html">Acerca de nosotros</a>

<!-- Enlace a sección de la misma página -->
<a href="#contacto">Ir a la sección de contacto</a>

<!-- Enlace de correo -->
<a href="mailto:hola@ejemplo.com">Envianos un mensaje</a>

<!-- Enlace telefónico -->
<a href="tel:+541150001234">Llamanos</a>

<!-- Enlace de descarga -->
<a href="informe.pdf" download>Descargar informe (PDF)</a>

Atributos

href — el destino del enlace

El atributo más importante de <a>. Define adónde lleva el enlace. Acepta varios tipos de valor:

URL absoluta — incluye protocolo y dominio. Usá siempre URL absoluta para recursos externos:

<a href="https://developer.mozilla.org">MDN Web Docs</a>

URL relativa — se resuelve desde el archivo actual. Usá para páginas del mismo sitio:

<!-- Misma carpeta -->
<a href="acerca.html">Acerca</a>
<!-- Subcarpeta -->
<a href="recetas/pasta.html">Receta de pasta</a>
<!-- Desde la raíz del dominio -->
<a href="/contacto">Contacto</a>

Fragmento #id — navega a un elemento con ese id dentro de la página. Si el id está en otra página, combinalo con la URL:

<!-- Ir a la sección con id="contacto" en la misma página -->
<a href="#contacto">Contacto</a>

<!-- Ir a una sección específica de otra página -->
<a href="/acerca#equipo">Nuestro equipo</a>

mailto: y tel: — protocolos especiales que abren el cliente de correo o el marcador telefónico:

<a href="mailto:info@ejemplo.com">info@ejemplo.com</a>
<a href="tel:+541150001234">+54 11 5000-1234</a>

Sin href (ancla sin destino) — el elemento existe pero no es un enlace navegable. Raro en uso moderno; si necesitás un botón sin URL, usá <button>.

target — dónde se abre el destino

<!-- Abre en pestaña nueva -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Visitar Example (nueva pestaña)
</a>

Cuándo usar _blank: solo cuando tiene sentido contextual (el usuario está leyendo algo y la nueva pestaña es un recurso complementario). No abuses: abrir en pestaña nueva sin contexto puede desorientar a usuarios de lectores de pantalla.

rel — relación con el destino

Define la relación semántica entre el documento actual y el recurso enlazado. Acepta una lista de valores separados por espacio.

noopener — impide que la nueva página acceda a window.opener (la pestaña que abrió el enlace). Elimina el vector de reverse tabnapping donde una página maliciosa podría redirigir la pestaña original.

noreferrer — además de noopener, evita que el navegador envíe la URL actual como referrer HTTP a la nueva página. Incluye el efecto de noopener.

Regla práctica: cuando usás target="_blank", siempre agregá rel="noopener noreferrer":

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Enlace seguro
</a>

nofollow — le indica a los motores de búsqueda que no deben seguir ese enlace ni traspasar autoridad SEO al destino. Útil para enlaces a contenido de usuarios o publicidad.

download — descargar en vez de navegar

Cuando está presente, el navegador descarga el recurso en lugar de navegar a él. Puede tener un valor para sugerir el nombre del archivo:

<!-- Descarga con nombre sugerido -->
<a href="reporte-2024.pdf" download="informe-anual.pdf">Descargar informe</a>

Solo funciona para recursos del mismo origen (same-origin) por restricciones de seguridad del navegador.

Estados e interacción (CSS)

<a> tiene cinco pseudoclases CSS para estilar sus estados:

El orden importa para que los estilos no se pisen: LoVe HAte → :link, :visited, :hover, :active (:focus puede ir con :hover).

a:link    { color: #2563eb; }
a:visited { color: #7c3aed; }
a:hover   { color: #1d4ed8; text-decoration: underline; }
a:focus   { outline: 2px solid #2563eb; outline-offset: 2px; }
a:active  { color: #1e40af; }

Accesibilidad

El texto de un enlace es su descripción funcional. Los lectores de pantalla pueden listar todos los enlaces de una página fuera de su contexto visual. Si ese texto dice “click aquí” o “ver más”, la lista es inútil — el usuario no sabe adónde lleva cada enlace.

Regla: el texto del <a>, leído solo, debe responder a “¿adónde llevo?” o “¿qué hace?”:

<!-- ❌ No descriptivo -->
<p>Para ver la receta, <a href="recetas/pasta.html">click aquí</a>.</p>

<!-- ✅ Descriptivo -->
<p>Mirá la <a href="recetas/pasta.html">receta de pasta con salsa</a>.</p>

Si el enlace contiene solo una imagen, el alt de la imagen pasa a ser el texto del enlace — asegurate de que sea descriptivo.

El rol implícito de <a href="..."> es link. Sin href, el rol es generic (no es un enlace). El foco con teclado (Tab) debe ser visible; nunca elimines el outline de :focus sin reemplazarlo por otro indicador visual.

Cuándo usar qué tipo de href

Notas, gotchas e interacción

• target="_blank" sin rel="noopener noreferrer" es un riesgo de seguridad (reverse tabnapping). Siempre los dos juntos.
• <a> sin href no es un enlace. El navegador no lo muestra subrayado, no recibe foco con Tab, y los lectores de pantalla no lo anuncian como enlace. Si necesitás un botón sin URL, usá <button>.
• download solo funciona en same-origin. Para archivos en otro dominio, el navegador navega en vez de descargar.
• Texto de enlace descriptivo es DoD de accesibilidad. “Hacé click acá” y “ver más” son los antipatrones más comunes; el texto debe tener sentido solo.
• <a> puede envolver bloques en HTML5. Una tarjeta de producto entera como un <a> es válido, pero el texto del <a> debe seguir siendo descriptivo (puede incluir el aria-label si el texto visible no basta).

Vigente / legacy

<a> está completamente vigente. Los atributos name (para anclas sin URL, como <a name="seccion">) y charset, coords, shape son legacy desde HTML5 — las anclas nombradas se reemplazaron por el atributo id en cualquier elemento. El atributo rev (relación inversa) también es legacy.