Abrir enlaces en pestañas nuevas y el atributo download
Use los atributos target y download para controlar el comportamiento de los enlaces.
Abrir enlaces en pestañas nuevas y el atributo download es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Abrir en una pestaña nueva
El atributo target controla dónde se abre el documento enlazado:
<a href="https://example.com" target="_blank">Open in new tab</a>
<!-- target values:
_blank → new tab (or window)
_self → same tab (default)
_parent → parent frame
_top → full window (exits frames)
-->El riesgo de seguridad de _blank
target="_blank" sin las precauciones necesarias crea una vulnerabilidad de seguridad:
- La página nueva puede acceder a la página que la abrió mediante
window.opener - Una página maliciosa podría redirigir la pestaña original
- Este ataque se denomina reverse tabnapping
rel=noopener noreferrer
Añada siempre rel="noopener noreferrer" cuando utilice target="_blank":
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->Cuándo abrir pestañas nuevas
Directrices de UX para target="_blank":
- Utilícelo para sitios externos cuando los usuarios no esperen salir de su aplicación
- Utilícelo para documentos de referencia, como PDF y guías
- No lo utilice para la navegación entre páginas internas
- Advierta siempre a los usuarios; añada un icono o un título que indique «se abre en una pestaña nueva»
Indicar a los usuarios que se abre una pestaña nueva
Informe a los usuarios de que el enlace se abre en una pestaña nueva:
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit Example (opens in new tab)">
Visit Example
<span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
The arrow icon gives visual users a hint -->El atributo download
El atributo download indica al navegador que descargue el archivo enlazado en lugar de navegar hasta él:
<a href="/reports/q4-report.pdf" download>
Download Q4 Report
</a>
<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
Export CSV
</a>Restricciones del atributo download
El atributo download tiene algunas restricciones:
- Solo funciona con URL del mismo origen
- Las descargas de otros orígenes requieren que el servidor envíe
Content-Disposition: attachment - El nombre de archivo de
downloades una sugerencia; las cabeceras del servidor pueden reemplazarlo
Descargas mediante URI de datos
Puede descargar contenido generado mediante URI de datos:
<a href="data:text/plain;charset=utf-8,Hello%20World!"
download="hello.txt">
Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->JavaScript y destinos de enlaces
Cuando JavaScript gestiona la navegación, evite usar target="_blank" de forma abusiva:
// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.openAtributo ping
El atributo ping envía una solicitud POST cuando se hace clic en el enlace, por ejemplo, para análisis:
<a href="/destination" ping="/analytics/track">
Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->Atributo type en enlaces
El atributo type indica el tipo MIME del recurso enlazado:
<a href="/report.pdf" type="application/pdf">
Download PDF Report
</a>
<a href="/data.json" type="application/json">
JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->Comprobación rápida
¿Qué atributo de seguridad debe acompañar siempre a target="_blank"?
Resumen: target y download
Atributos que controlan el comportamiento de los enlaces:
target="_blank": abre el enlace en una pestaña nueva- Añada siempre
rel="noopener noreferrer"junto con_blank - Advierta visualmente a los usuarios cuando un enlace se abra en una pestaña nueva
download: inicia la descarga de un archivo en lugar de la navegacióndownload="filename": sugiere un nombre de archivo para la descarga
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Abrir enlaces en pestañas nuevas y el atributo download» es gratis?
Sí — el texto completo de «Abrir enlaces en pestañas nuevas y el atributo download» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Abrir enlaces en pestañas nuevas y el atributo download»?
Use los atributos target y download para controlar el comportamiento de los enlaces. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Abrir enlaces en pestañas nuevas y el atributo download»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El elemento anchor y el atributo href
- URL absolutas frente a relativas
- Abrir enlaces en pestañas nuevas y el atributo download
- Enlaces a secciones e identificadores de fragmento