Atributo target: ¿Cuándo y cómo usarlo?

Estás maquetando una nueva página para un cliente. Tienes que poner un enlace a una web externa, como su perfil de LinkedIn. Y entonces llega la duda de siempre: ¿lo abro en la misma pestaña o en una nueva? La solución rápida es meter un target="_blank" y a correr. Pero, ojo, porque ese pequeño atributo que parece inofensivo puede abrir una brecha de seguridad en tu web y, de paso, fastidiar la experiencia de tus usuarios.

Llevo más de 10 años en el mundo del desarrollo web y el SEO, y he visto este error en el 90% de las webs que audito, desde pequeños blogs hasta e-commerce que facturan millones. No es una tontería. Entender bien el atributo target no es solo una buena práctica de código, es una necesidad para proteger tu proyecto y a quienes lo visitan. En este artículo te voy a contar, sin tecnicismos absurdos, cómo usarlo bien, cuándo y por qué ese rel="noopener noreferrer" que ves por ahí es tu mejor amigo.

Lo que te llevarás de este artículo:

• El riesgo de seguridad que casi nadie conoce al usar target="_blank" y cómo blindar tu web en menos de 10 segundos.
• Mi método probado para decidir cuándo abrir enlaces en una nueva pestaña y cuándo estás cometiendo un error de usabilidad.
• Una tabla-resumen para tener a mano todos los valores del target y sus casos de uso reales, para que no vuelvas a dudar.
• Ejemplos de código listos para copiar y pegar, explicados de forma clara para que sepas exactamente lo que estás haciendo.

¿Qué es exactamente el atributo target en desarrollo web?

Vamos al grano. El atributo target es una instrucción que le damos a un enlace (una etiqueta <a>) en HTML para decirle al navegador dónde debe abrir el recurso al que apunta. Por defecto, si no pones nada, el navegador lo abrirá en la misma pestaña. Es como si le dijeras: «Sustituye esta página por la nueva».

Pero a veces no queremos eso. A veces queremos que nuestra web siga abierta en una pestaña y que el enlace se abra en otra nueva. Ahí es donde entra en juego el target.

La sintaxis básica que debes conocer

La implementación es súper sencilla. Se añade directamente dentro de la etiqueta de ancla <a>, junto al href que contiene la URL de destino.

Un enlace normal, que se abre en la misma pestaña, se vería así:

<a href="https://ejemplo.com">Visita Ejemplo.com</a>

Un enlace que queremos que se abra en una nueva pestaña, usaría el atributo target:

<a href="https://ejemplo.com" target="_blank">Visita Ejemplo.com en una nueva pestaña</a>

Fácil, ¿verdad? El problema es que _blank es solo uno de los posibles valores, y además, es el que trae más miga.

Los valores del atributo target: no todo es «_blank»

Aunque en el día a día casi siempre vemos el valor _blank, existen otros que es útil conocer, sobre todo si trabajas con iframes. Aquí te he preparado una tabla para que los tengas a mano de un vistazo.

Valor	Descripción	Caso de uso recomendado	¿Necesita protección?
_self	Abre el enlace en la misma ventana o pestaña. Es el comportamiento por defecto.	Para toda la navegación interna de tu web. Ayuda a mantener una experiencia fluida.	No
_blank	Abre el enlace en una nueva ventana o pestaña.	Enlaces a webs externas, documentos (PDFs) o contenido que interrumpe el flujo principal.	Sí, siempre.
_parent	Abre el enlace en el ‘frameset’ padre. Si no hay padre, actúa como _self.	Muy específico. Se usa para salir de un iframe hacia su contenedor directo.	No
_top	Abre el enlace en la ventana original completa, cancelando todos los ‘frames’.	Útil para «escapar» de varios iframes anidados y cargar la página a pantalla completa.	No

La verdad es que, en la actualidad, el 99% de las veces usarás _self (o sea, no poner nada) o _blank. Los otros dos son reliquias de cuando las webs se construían con frames, aunque todavía tienen su utilidad en casos muy concretos con iframes.

El problema de seguridad de target=»_blank» que casi nadie te cuenta

Aquí viene la parte importante, la que muchos desarrolladores junior (y no tan junior) pasan por alto. Cuando usas target="_blank" sin más, creas una pequeña vulnerabilidad de seguridad conocida como «tabnabbing».

¿Qué es el «tabnabbing» o secuestro de pestaña?

Te lo explico de forma sencilla. Cuando abres una nueva pestaña con target="_blank", la página nueva tiene acceso a la página original a través de un objeto de JavaScript llamado window.opener. Esto significa que la página que acabas de abrir podría, con un poco de código malicioso, cambiar la URL de la página original sin que el usuario se dé cuenta.

Imagina el percal: un usuario hace clic en un enlace de tu web que va a una página externa. Esa página externa, que podría haber sido hackeada, detecta que viene de tu web y cambia tu página (la que quedó abierta en la pestaña anterior) por una página de login falsa que se parece a la tuya. El usuario vuelve, ve una pantalla de login, mete sus datos y… ¡listo! Le acaban de robar las credenciales. Esto es un tipo de phishing muy peligroso.

La solución: `rel=»noopener noreferrer»` al rescate

Por suerte, la solución es increíblemente fácil. Solo tienes que añadir otro atributo a tu enlace: rel="noopener noreferrer". Fin del problema.

<a href="https://web-externa.com" target="_blank" rel="noopener noreferrer">Enlace externo seguro</a>

¿Qué hace exactamente este añadido?

• noopener: Le dice al navegador que la nueva pestaña no tenga acceso al window.opener. Corta de raíz la posibilidad de que la página nueva pueda manipular la tuya. Es la pieza clave de la seguridad.
• noreferrer: Evita que la nueva página sepa de dónde viene el tráfico. Es decir, cuando el usuario haga clic, la web de destino no sabrá que ha llegado desde tu web. Esto es más una cuestión de privacidad y a veces de analítica, pero es una buena práctica añadirlo junto a noopener.

Mi consejo como consultor: Conviértelo en un automatismo. Cada vez que escribas target="_blank", escribe a continuación rel="noopener noreferrer". Sin pensarlo. Tu yo del futuro te lo agradecerá.

¿Cuándo usar target=»_blank»? Mi recomendación como consultor

Ahora que sabes cómo usarlo de forma segura, la pregunta es: ¿cuándo deberías hacerlo? Abrir todo en pestañas nuevas puede parecer una buena idea para «retener» al usuario, pero a menudo es un error de usabilidad (UX) de manual.

Aquí tienes mi checklist personal:

1. ¿El enlace lleva a otra web? Si la respuesta es sí, es un buen candidato para target="_blank". No quieres echar a tus usuarios de tu sitio solo porque quieren consultar una fuente externa.
2. ¿El enlace abre un documento (PDF, imagen, etc.)? Definitivamente, usa target="_blank". Es muy molesto que la descarga de un PDF te saque de la página en la que estabas navegando.
3. ¿El enlace está dentro de un proceso o flujo de usuario (ej: un carrito de compra)? ¡Nunca uses target="_blank" aquí! Si el usuario está a mitad de un pago, lo último que quieres es distraerlo con nuevas pestañas. Manténlo todo en el mismo flujo.
4. ¿El enlace es parte de la navegación principal de tu web (menú, enlaces internos)? Prohibido usar target="_blank". Rompes el comportamiento estándar de la web y el usuario pierde el control del botón «Atrás» del navegador, lo cual es de las cosas más frustrantes que existen.

La regla de oro es: usa target="_blank" solo cuando quieras que el usuario realice una tarea secundaria sin perder el contexto principal de tu página.

Lo que debes recordar sobre el atributo target

Si has llegado hasta aquí, ya sabes más sobre el atributo target que la mayoría. La verdad es que no es un tema complejo, pero tiene matices que marcan la diferencia entre una web profesional y segura y una que no lo es.

Quédate con estas tres ideas clave:

1. El poder conlleva responsabilidad: target="_blank" es útil, pero úsalo con cabeza y solo cuando aporte valor real a la experiencia del usuario.
2. La seguridad no es negociable: Grábate a fuego la combinación target="_blank" rel="noopener noreferrer". Úsala siempre. Los sistemas de gestión de contenido como WordPress ya lo hacen automáticamente, pero si tocas código, es tu responsabilidad.
3. Piensa en el usuario, no en ti: No abras enlaces en nuevas pestañas solo por miedo a que el usuario se vaya. Si tu contenido es bueno, volverá. Prioriza siempre una navegación intuitiva y predecible.

Aplicar esto no te va a llevar más tiempo y mejorará enormemente la calidad y seguridad de tus proyectos web. Si tienes cualquier duda, déjame un comentario y te echo un cable.

Dudas que siempre me preguntan sobre este tema

¿Usar target=»_blank» afecta al SEO?

Directamente, no. Google no te va a penalizar por usar target="_blank". Sin embargo, indirectamente, podría tener un impacto. Si abusas de él y creas una mala experiencia de usuario (la gente se siente perdida con tantas pestañas), tu tasa de rebote puede aumentar y el tiempo en página disminuir. Esas sí son señales que Google tiene en cuenta. Así que, como siempre en SEO, lo que es bueno para el usuario es bueno para Google.

¿Qué pasa con la accesibilidad web?

Es un punto importante. Abrir enlaces en nuevas pestañas puede ser confuso para usuarios que utilizan lectores de pantalla, ya que el cambio de contexto no siempre es evidente. Si vas a usar target="_blank", es una buena práctica avisar visualmente al usuario (por ejemplo, con un pequeño icono de «enlace externo») y también a nivel de código para los lectores de pantalla, añadiendo un texto oculto como <span class="sr-only">(se abre en una nueva pestaña)</span> dentro del enlace.

¿Es más importante «noopener» o «noreferrer»?

Ambos son importantes, pero por razones distintas. noopener es crucial para la seguridad, ya que previene el «tabnabbing». noreferrer es importante para la privacidad y para evitar que se pase información de referencia a la página de destino. Si tuvieras que elegir solo uno (que no deberías), el de seguridad, noopener, es el más crítico.

¿Puedo usar target=»_blank» en un formulario?

Sí, la etiqueta <form> también admite el atributo target. Al usar target="_blank" en un formulario, la respuesta del servidor tras enviar los datos se mostrará en una nueva pestaña. Esto puede ser útil en casos muy específicos, como previsualizar algo o generar un informe sin salir de la página original. Pero, de nuevo, úsalo con precaución porque puede ser un comportamiento inesperado para el usuario.