HTML
Atributos y relaciones de los enlaces HTML: rel, target, download y referrerpolicy, con consideraciones de seguridad, privacidad y comportamiento.
Los atributos de enlace configuran la relación entre recursos, el contexto de navegación, la descarga y la información enviada al destino.
<a
href="https://example.com/report.pdf"
target="_blank"
rel="noopener noreferrer"
>
Abrir informe
</a><a href="/portfolio" target="_self">...</a>Keywords comunes:
_self: contexto actual._blank: nuevo contexto de navegación._parent: parent context._top: contexto superior.También puede usarse un nombre para reutilizar un contexto específico.
<a href="/services" target="_blank">Servicios</a>Quita control al usuario y puede desorientar. Utiliza _blank cuando existe una necesidad clara y comunica el comportamiento si es inesperado.
El usuario ya puede decidir abrir un enlace mediante su navegador.
Una página abierta puede obtener referencia a quien la abrió en ciertos escenarios.
<a
href="https://external.example"
target="_blank"
rel="noopener"
>
Sitio externo
</a>Navegadores modernos tratan muchos links _blank como noopener por defecto, pero expresarlo mantiene intención y compatibilidad.
rel="noreferrer"Evita enviar información de referrer y también implica protección de opener en navegadores modernos.
No lo añadas automáticamente si analytics o atribución legítima necesitan el origen reducido por otra política.
<a
href="https://external.example"
referrerpolicy="strict-origin-when-cross-origin"
>
Recurso
</a>Controla qué información de la URL actual se envía al destino.
Valores incluyen políticas como:
no-referrer.origin.same-origin.strict-origin.strict-origin-when-cross-origin.La política efectiva puede venir de headers, meta y atributos; el atributo es específico del elemento.
rel es una lista de tokens que describe la relación.
<a href="/author/nicolas" rel="author">Nicolás Garzón</a><a href="https://external.example" rel="external">Sitio externo</a><a href="/terms" rel="license">Licencia</a>No todos los tokens cambian comportamiento visible; algunos son metadata para herramientas.
<a href="..." rel="nofollow">...</a>
<a href="..." rel="sponsored">...</a>
<a href="..." rel="ugc">...</a>Comunican naturaleza del enlace a motores que deciden interpretarlos:
sponsored: publicidad o compensación.ugc: contenido generado por usuarios.nofollow: no respaldar o no seguir mediante señales normales.No son controles de seguridad ni impiden que alguien visite la URL.
<a href="/files/cv.pdf" download>
Descargar CV
</a>Sugiere descargar en lugar de navegar.
<a href="/files/cv.pdf" download="nicolas-garzon-cv.pdf">Sugiere un nombre.
El navegador puede ignorarlo por políticas, headers, origen o configuración. No garantiza descarga de cualquier recurso cross-origin.
El servidor puede responder:
Content-Disposition: attachment; filename="report.pdf"Los headers pueden tener prioridad sobre la sugerencia del atributo y son más apropiados para controlar descargas reales.
<a href="/en/services" hreflang="en">English version</a>Indica el idioma del recurso enlazado; no cambia el idioma del texto del enlace.
<a href="/report.pdf" type="application/pdf">Informe PDF</a>Da una pista sobre el media type del destino. No sustituye el header real ni garantiza que el recurso coincida.
<a href="/product" ping="/analytics/click">Producto</a>Permite notificaciones de hyperlink auditing a URLs especificadas. Tiene implicaciones de privacidad, bloqueo y políticas; no lo utilices sin una decisión explícita y transparente.
<a href="https://example.com">
Documentación externa
<span class="visually-hidden"> (sitio externo)</span>
</a>No es obligatorio anunciar cada dominio externo, pero puede ayudar cuando cambia el contexto de forma significativa.
<a href="/cv.pdf" download>
Descargar CV <span>(PDF, 180 KB)</span>
</a>Mostrar formato y tamaño ayuda a tomar una decisión, especialmente en conexiones limitadas.
<a
href="https://github.com/example/project"
target="_blank"
rel="external noopener noreferrer"
>
Ver repositorio en GitHub
</a>_blank a todos los enlaces.¿Por qué rel="nofollow" no protege al usuario de una página maliciosa?
Porque es una señal de relación para crawlers; no impide la navegación ni restringe el código del destino.
Imágenes y texto alternativo inicia el bloque de medios y recursos.