Tecnología / Ficha de diccionario

A href: cómo crear enlaces en HTML correctamente

La expresión a href se refiere al elemento HTML <a> acompañado del atributo href, que indica el destino de un enlace. El contenido entre la apertura y el cierre es lo que la persona puede activar para navegar.

Entender a href permite revisar menús, referencias y enlaces internos sin confundir apariencia con funcionamiento. Un texto azul no es necesariamente un enlace: importa el HTML que utiliza y si el destino existe y responde a lo anunciado.

A href: estructura de un enlace

Este ejemplo conduce a una página real de esta web:

<a href="/interlinking/">Guía de enlaces internos</a>

La etiqueta a crea el enlace, href contiene la dirección y «Guía de enlaces internos» es el texto visible. Utiliza comillas para delimitar el valor del atributo y cierra la etiqueta. No anides un enlace dentro de otro ni coloques botones interactivos dentro de un enlace.

Direcciones completas, rutas y fragmentos

Una URL completa incluye protocolo y dominio; una ruta que empieza por / se resuelve desde la raíz del sitio. Una ruta sin esa barra depende de la ubicación actual, salvo que exista una base configurada. Esta diferencia explica muchos enlaces que funcionan en portada pero fallan dentro de una carpeta.

<a href="https://example.com/catalogo/">Catálogo</a>
<a href="/contacto/">Contacto</a>
<a href="#requisitos">Requisitos</a>

Son ejemplos de sintaxis. El fragmento requisitos necesita un elemento con id="requisitos" en esa página. Cambiar el título de una sección no debe dejar un índice apuntando a un identificador inexistente.

Texto visible, nuevas pestañas y atributos

Escribe un texto que describa el destino, como «condiciones de entrega», en lugar de repetir «aquí». Si el enlace es una imagen, su alternativa textual debe explicar la función correspondiente. La accesibilidad depende también del contexto y de que el enlace pueda usarse con teclado.

target="_blank" abre otro contexto de navegación, habitualmente una pestaña. Úsalo con criterio e informa cuando ayude a evitar sorpresas. rel="noopener" trata la relación con la ventana de origen; no significa nofollow ni identifica un patrocinio.

Comprobaciones para navegación y SEO

Google recomienda enlaces a con href para descubrir destinos de forma fiable. Si una interacción solo ejecuta una acción, como desplegar un filtro, normalmente corresponde un botón. No uses href vacío, # o javascript como sustituto de un enlace a una página real.

Prueba el destino, revisa el idioma y comprueba si pasa por redirecciones evitables. Un enlace correcto no obliga a indexar la página ni garantiza posiciones. Para organizar sus relaciones consulta la guía de interlinking.

Si estás aplicando estos enlaces al menú, las fichas o las llamadas a la acción de tu proyecto, puedes consultar el servicio de Diseño web en Barcelona. Allí explicamos cómo combinamos navegación, accesibilidad y presentación en una web orientada a su uso.