11 · Navegación

Anchor (<a>)

El anchor es la etiqueta que hace de la web una red. Su atributo clave eshref — sin él, técnicamente no es un link (ni siquiera es enfocable con teclado).

Tipos de href

href acepta rutas relativas, absolutas, anclas internas (#id), y esquemas especiales como mailto: y tel:.

Ruta relativa mailto:tel:

<a href="/blog">Ruta relativa</a>
<a href="https://ejemplo.com">Ruta absoluta</a>
<a href="#seccion">Ancla interna</a>
<a href="mailto:hola@ejemplo.com">Email</a>
<a href="tel:+56912345678">Teléfono</a>

→Una ruta relativa como /blog siempre parte desde la raíz del sitio; blog (sin slash) es relativa a la carpeta actual — la diferencia importa cuando cambias de nivel de rutas.

target='_blank' seguro

target='_blank' abre el link en una pestaña nueva. Sin rel='noopener noreferrer', la página nueva puede acceder a window.opener de la original — un riesgo de seguridad conocido como 'tabnabbing'.

Sitio externo

<a href="https://ejemplo.com" target="_blank" rel="noopener noreferrer">
  Abre en pestaña nueva
</a>

→Navegadores modernos aplican noopener implícitamente en _blank, pero seguir escribiéndolo explícito es buena práctica y necesario para navegadores viejos.
→Abrir pestañas nuevas sin avisar rompe expectativas del usuario — considera avisar visualmente (ícono) cuando lo hagas.

Atributo download

Fuerza al navegador a descargar el recurso en vez de navegar a él. Se le puede pasar un nombre de archivo sugerido como valor.

Descargar PDF

<a href="/archivos/reporte.pdf" download="reporte-2026.pdf">
  Descargar PDF
</a>

→Solo funciona de forma confiable con recursos del mismo origen; para archivos de otro dominio el navegador puede ignorarlo por seguridad.

Estados de link: hover, focus-visible, visited

Un link tiene varios estados posibles y cada uno merece feedback visual, sobre todo el foco (para quienes navegan con teclado).

Prueba con Tab + click

<a class="text-amber-700 hover:text-amber-900
           focus-visible:outline-2 focus-visible:outline-amber-600
           focus-visible:outline-offset-2">
  Link con estados
</a>

→focus-visible (a diferencia de focus) solo se activa en navegación por teclado, no al hacer click con el mouse — evita anillos de foco 'molestos' en clicks pero los mantiene para accesibilidad.
→No elimines el outline de foco con outline-none sin reemplazarlo por algo igual de visible.

Links que parecen botones

Cuando un <a> dispara una acción de navegación pero visualmente necesita verse como botón, se le aplican clases de botón — pero semánticamente sigue siendo un link (por eso lleva href).

Ir al checkout

<a href="/checkout"
   class="inline-block bg-amber-600 text-white px-5 py-2.5 rounded-lg">
  Ir al checkout
</a>

→Regla general: si navega a otra URL, es <a>. Si ejecuta una acción sin cambiar de página (enviar un form, abrir un modal), es <button> — aunque visualmente sean idénticos.