HTML
Cómo crear enlaces accesibles y comprensibles en HTML, distinguir navegación de acciones y redactar textos de enlace con contexto suficiente.
El elemento crea un enlace cuando tiene . Su propósito es navegar hacia otro recurso o ubicación.
ahref<a href="/portfolio">Ver proyectos</a>Navegación:
<a href="/services">Ver servicios</a>Acción:
<button type="button">Abrir filtros</button>No uses:
<a href="#" onclick="save()">Guardar</a>El href="#" cambia la URL y la posición; la semántica continúa siendo navegación.
Debe comunicar el destino fuera del contexto inmediato.
Mejor:
<a href="/portfolio/domisys">Ver proyecto DomiSys</a>Menos claro cuando se repite:
<a href="/portfolio/domisys">Ver más</a>El contexto accesible puede incluir texto de la card, pero enlaces distinguibles facilitan navegación y voz.
a puede envolver phrasing o flow content según el contexto:
<a class="project-card" href="/portfolio/domisys">
<article>
<h2>DomiSys</h2>
<p>Sistema de gestión para negocios.</p>
</article>
</a>No debe contener otros controles interactivos.
<a href="/portfolio/domisys"></a>No tiene nombre accesible ni objetivo visible. Un icon link necesita nombre mediante texto visible u otra técnica apropiada.
<a href="/" aria-label="Inicio">
<svg aria-hidden="true">...</svg>
</a>Si existe texto visible, normalmente úsalo como nombre en lugar de sobrescribirlo con aria-label.
<a href="https://developer.mozilla.org/">MDN</a>Incluye scheme y host.
<a href="/portfolio">Desde la raíz del origen</a>
<a href="../portfolio">Relativa al documento base</a>
<a href="project">Segmento relativo</a>La resolución depende de la URL del documento y de base si existe.
<a href="#contact">Ir a contacto</a>
<section id="contact">...</section>El ID debe ser único. La navegación puede mover scroll y foco de lectura, pero no siempre asigna foco DOM al destino; diseña skip links y contenido dinámico con pruebas.
<a href="mailto:hello@example.com">Enviar correo</a>
<a href="tel:+5712345678">Llamar</a>Dependen de una aplicación configurada. Muestra el dato útil y evita llenar mailto con información sensible o contenido enorme.
<a href="sms:+573001234567">Enviar SMS</a>El soporte depende del dispositivo y handler instalado. Ofrece contexto y alternativas cuando sea importante.
<nav aria-label="Principal">
<a href="/portfolio" aria-current="page">Proyectos</a>
</nav>aria-current comunica el item actual. No reemplaza href; el enlace puede seguir navegando o recargando.
No necesitas añadir texto “abre en una nueva pestaña” si no usas target blank.
Si una navegación abre un contexto nuevo, avisa cuando pueda sorprender o afectar flujo.
<a href="/portfolio/domisys">
<img
src="domisys.webp"
alt="Vista del dashboard de DomiSys"
>
</a>El alt participa en el nombre del enlace. Si hay texto adyacente que ya nombra el destino, la imagen puede ser decorativa:
<a href="/portfolio/domisys">
<img src="domisys.webp" alt="">
<span>DomiSys</span>
</a>Es válido si la card tiene una sola navegación principal y no contiene buttons, otros links o controles.
Si existen varias acciones, mantén estructura separada:
<article>
<h2><a href="/project">DomiSys</a></h2>
<button type="button">Guardar favorito</button>
</article>Los links con href son enfocables y se activan normalmente con Enter. No retires el outline sin reemplazo visible.
<nav aria-label="Principal">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/portfolio" aria-current="page">Proyectos</a></li>
<li><a href="/services">Servicios</a></li>
</ul>
</nav># o javascript:.a con href representa navegación.aria-current indica la ubicación actual.¿Por qué un botón “Ir a servicios” debería ser normalmente un enlace?
Porque cambia la ubicación del usuario hacia otra URL; esa es la responsabilidad nativa de un enlace y permite copiar, abrir o guardar el destino.
URLs, rutas relativas y fragmentos profundiza en cómo se resuelven destinos y recursos.