Docs ejecutables de HTML: Abrir en nueva pestaña

Q: ¿Cómo hago que un enlace se abra en una nueva pestaña en HTML?

Añade target="blank" a la etiqueta : Example . El navegador abre la página en una pestaña nueva y mantiene abierta la página actual.

Q: ¿Sigo necesitando rel="noopener" con target="_blank"?

Las versiones actuales de Chrome, Firefox y Safari aplican noopener automáticamente a los enlaces con target="_blank", así que la página nueva no puede llegar a la tuya a través de window.opener. Escribir rel="noopener" no cuesta nada y protege a quienes usan navegadores antiguos, por eso la mayoría de las guías de estilo lo siguen pidiendo.

Q: ¿Qué diferencia hay entre noopener y noreferrer?

noopener corta la conexión entre las dos pestañas (window.opener es null en la nueva). noreferrer hace eso y además impide que el navegador envíe la URL de tu página como referente, así que la analítica del otro sitio ve la visita como directa.

Q: ¿Puede HTML obligar a que un enlace se abra en una ventana nueva en vez de en una pestaña?

No. target="_blank" pide un contexto de navegación nuevo, y el navegador y la configuración del usuario deciden si es una pestaña o una ventana. Los navegadores actuales abren una pestaña.

Q: ¿Cómo abro todos los enlaces de una página en una nueva pestaña?

Pon en el . Todos los enlaces sin target propio se abren entonces en una pestaña nueva. También afecta a los formularios, así que úsalo solo en páginas donde de verdad sea lo que quieres.

Abrir un enlace en una nueva pestaña con target="_blank"

Añade target="_blank" al enlace. El navegador abre el destino en una pestaña nueva y deja tu página donde estaba.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

Esa es toda la técnica: target="_blank" en el <a>, más rel="noopener", que se explica a continuación. Los lectores también pueden abrir cualquier enlace en una pestaña nueva con Ctrl+clic (Cmd+clic en Mac) o con el botón central, así que usa target="_blank" solo cuando salir de la página les haría perder algo, como un formulario a medio rellenar o un vídeo en reproducción.

Las vistas previas de esta página abren todos los enlaces externos en una pestaña nueva, con o sin target, porque un marco de ejemplo nunca debe navegar fuera. Para ver la diferencia que marca target, guarda el ejemplo como archivo y ábrelo en tu navegador.

rel="noopener" y rel="noreferrer"

Una página abierta con target="_blank" recibía antes una referencia a tu página en window.opener, y podía usarla para llevar tu pestaña a otra URL (por ejemplo, una página de inicio de sesión falsa). rel="noopener" elimina esa referencia.

Valor de `rel`	`window.opener` en la pestaña nueva	Referente enviado al sitio nuevo
ninguno (navegadores antiguos)	Tu página	Sí
ninguno (navegadores actuales)	`null`	Sí
`noopener`	`null`	Sí
`noreferrer`	`null`	No
`opener`	Tu página	Sí

Las versiones actuales de Chrome, Firefox y Safari tratan todo enlace con target="_blank" como noopener salvo que escribas rel="opener". Escribir rel="noopener" de todos modos protege a quienes usan navegadores antiguos y deja la intención visible en el código.

noreferrer además impide que el navegador envíe el referente, así que el sitio al que enlazas no ve de qué página viene el visitante. Es una decisión de privacidad, no de seguridad: úsalo cuando tu URL deba quedar privada, y omítelo con socios que necesitan ver tu tráfico.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel admite varios valores separados por espacios, así que noopener se combina con los valores de SEO: rel="noopener sponsored" para un enlace de pago, rel="noopener nofollow" para un enlace que no avalas.

Avisa de que el enlace abre una pestaña nueva

Una pestaña nueva que se abre sin aviso desorienta, sobre todo a quienes usan lectores de pantalla, que pueden no darse cuenta de que la página cambió. Dilo en el enlace. Un icono pequeño lo muestra a quienes ven la pantalla; un texto oculto se lo dice a los lectores de pantalla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

El selector a[target="_blank"] añade la flecha a todos los enlaces que abren pestaña nueva de forma automática, así que nunca se te olvida ninguno. El span oculto se lee como parte del nombre del enlace, "accessibility guidelines (opens in a new tab)", pero no ocupa espacio en pantalla.

Marcar todos los enlaces externos automáticamente

Los selectores de atributo pueden dar estilo a los enlaces según su href. Aquí todos los enlaces que empiezan por http reciben la flecha, y los enlaces internos del sitio no:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= significa "empieza por". El selector solo da estilo a los enlaces: los atributos target y rel tienen que estar igualmente en el HTML.

Los valores de target

target indica dónde se abre el enlace. Hay cuatro palabras clave, y cualquier otro valor es un nombre:

`target`	Abre el enlace en
`_self`	La misma pestaña o marco. Es el valor por defecto.
`_blank`	Una pestaña nueva sin nombre
`_parent`	El padre del marco actual (igual que `_self` fuera de los marcos)
`_top`	La pestaña entera, saliendo de todos los marcos
cualquier nombre, p. ej. `help`	La pestaña o el marco con ese nombre, que se crea si no existe

Un destino con nombre se reutiliza. Todos los enlaces con target="help" se abren en la misma pestaña, así que un lector que pulsa cinco enlaces de ayuda obtiene una pestaña, no cinco. _top es el que debes usar dentro de un <iframe> cuando un enlace debe reemplazar la página entera en lugar del marco.

Abrir todos los enlaces en una pestaña nueva con el elemento base

<base target="_blank"> en el <head> fija el destino por defecto de todos los enlaces y formularios de la página:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

El target propio de un enlace tiene prioridad sobre <base>. Úsalo poco: una página donde todos los enlaces abren una pestaña nueva es incómoda de usar.

Abrir una pestaña nueva desde JavaScript

window.open(url, '_blank') abre una pestaña desde un script. Pasa 'noopener' como tercer argumento para tener la misma protección que con el atributo rel. Con él, window.open devuelve null en lugar de una referencia a la pestaña nueva:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

Los navegadores bloquean window.open salvo que se ejecute como respuesta a un clic o a una pulsación de tecla, así que llámalo desde un manejador de eventos, no al cargar la página ni tras un temporizador. Si el destino es una URL que el lector podría ver de antemano, un enlace con target="_blank" es más sencillo y funciona sin JavaScript. El enlace en sí se explica en link en HTML.

Errores comunes

target="blank" sin el guion bajo. Es un nombre, no la palabra clave. Abre una pestaña nueva la primera vez y luego reutiliza esa pestaña para todos los demás enlaces con el mismo nombre.
target="_new". También es solo un nombre, con el mismo efecto: una única pestaña reutilizada.
Poner target en todos los enlaces. Los enlaces internos deben abrirse en la misma pestaña. Quien quiera una pestaña nueva sabe cómo abrirla.
No indicar que un enlace abre una pestaña nueva. Añade un icono y un texto oculto.
Añadir noreferrer a enlaces de socios o de afiliados y luego preguntarse por qué el socio no ve ninguna visita referida.

Preguntas frecuentes

¿Cómo hago que un enlace se abra en una nueva pestaña en HTML?

Añade target="_blank" a la etiqueta <a>: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. El navegador abre la página en una pestaña nueva y mantiene abierta la página actual.

¿Sigo necesitando rel="noopener" con target="_blank"?

Las versiones actuales de Chrome, Firefox y Safari aplican noopener automáticamente a los enlaces con target="_blank", así que la página nueva no puede llegar a la tuya a través de window.opener. Escribir rel="noopener" no cuesta nada y protege a quienes usan navegadores antiguos, por eso la mayoría de las guías de estilo lo siguen pidiendo.

¿Qué diferencia hay entre noopener y noreferrer?

noopener corta la conexión entre las dos pestañas (window.opener es null en la nueva). noreferrer hace eso y además impide que el navegador envíe la URL de tu página como referente, así que la analítica del otro sitio ve la visita como directa.

¿Puede HTML obligar a que un enlace se abra en una ventana nueva en vez de en una pestaña?

No. target="_blank" pide un contexto de navegación nuevo, y el navegador y la configuración del usuario deciden si es una pestaña o una ventana. Los navegadores actuales abren una pestaña.

¿Cómo abro todos los enlaces de una página en una nueva pestaña?

Pon <base target="_blank"> en el <head>. Todos los enlaces sin target propio se abren entonces en una pestaña nueva. También afecta a los formularios, así que úsalo solo en páginas donde de verdad sea lo que quieres.

Conceptos relacionados