Docs executáveis de HTML: Abrir em nova aba

Q: Como fazer um link abrir em nova aba no HTML?

Adicione target="blank" à tag : Example . O navegador abre a página numa nova aba e mantém a página atual aberta.

Q: Ainda preciso de rel="noopener" com target="_blank"?

As versões atuais de Chrome, Firefox e Safari aplicam noopener automaticamente aos links com target="_blank", então a página nova não consegue acessar a sua por window.opener. Escrever rel="noopener" não custa nada e protege visitantes em navegadores antigos, por isso a maioria dos guias de estilo ainda pede.

Q: Qual a diferença entre noopener e noreferrer?

noopener corta a ligação entre as duas abas (window.opener é null na nova). noreferrer faz isso e também impede que o navegador envie a URL da sua página como referenciador, então o analytics do outro site vê a visita como direta.

Q: O HTML consegue forçar um link a abrir numa nova janela em vez de uma aba?

Não. target="_blank" pede um novo contexto de navegação, e o navegador e as configurações do usuário decidem se será uma aba ou uma janela. Os navegadores atuais abrem uma aba.

Q: Como abrir todos os links de uma página em nova aba?

Coloque no . Todo link sem target próprio passa a abrir numa nova aba. Isso também afeta formulários, então use só em páginas em que é mesmo isso que você quer.

Abrir um link em nova aba com target="_blank"

Adicione target="_blank" ao link. O navegador abre o destino numa nova aba e deixa a sua página onde estava.

<!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>

A técnica é só isso: target="_blank" no <a>, mais rel="noopener", explicado a seguir. O leitor também pode abrir qualquer link numa nova aba por conta própria com Ctrl+clique (Cmd+clique no Mac) ou com o botão do meio, então use target="_blank" só quando sair da página custaria algo a ele, como um formulário preenchido pela metade ou um vídeo tocando.

As prévias desta página abrem todo link externo numa nova aba, com ou sem target, porque um frame de exemplo nunca pode navegar para fora. Para ver a diferença que target faz, salve o exemplo como arquivo e abra no seu navegador.

rel="noopener" e rel="noreferrer"

Uma página aberta com target="_blank" recebia uma referência à sua página em window.opener, e podia usá-la para mandar a sua aba para outra URL (por exemplo, uma página de login falsa). rel="noopener" remove essa referência.

Valor de `rel`	`window.opener` na nova aba	Referenciador enviado ao novo site
nenhum (navegadores antigos)	A sua página	Sim
nenhum (navegadores atuais)	`null`	Sim
`noopener`	`null`	Sim
`noreferrer`	`null`	Não
`opener`	A sua página	Sim

As versões atuais de Chrome, Firefox e Safari tratam todo link com target="_blank" como noopener, a não ser que você escreva rel="opener". Escrever rel="noopener" mesmo assim protege visitantes em navegadores antigos e deixa a intenção visível no código.

noreferrer também impede o navegador de enviar o referenciador, então o site para onde você aponta não vê de qual página o visitante veio. É uma escolha de privacidade, não de segurança: use quando a sua URL deve ficar privada, e deixe de fora com parceiros que precisam ver o seu tráfego.

<!-- 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 aceita vários valores separados por espaço, então noopener combina com os valores de SEO: rel="noopener sponsored" para um link pago, rel="noopener nofollow" para um link que você não recomenda.

Avise o usuário de que o link abre uma nova aba

Uma aba nova que abre sem aviso desorienta, principalmente quem usa leitor de tela, que pode nem perceber que a página mudou. Diga isso no link. Um ícone pequeno mostra para quem enxerga; um texto oculto diz para quem usa leitor de tela:

<!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>

O seletor a[target="_blank"] adiciona a seta a todo link de nova aba automaticamente, então você nunca esquece nenhum. O span oculto é lido como parte do nome do link, "accessibility guidelines (opens in a new tab)", mas não ocupa espaço na tela.

Marque todo link externo automaticamente

Seletores de atributo podem estilizar links pelo href. Aqui todo link que começa com http ganha a seta, e os links internos do site não:

<!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 "começa com". O seletor só estiliza os links: os atributos target e rel continuam precisando estar no HTML.

Os valores de target

target diz onde o link abre. Existem quatro palavras-chave, e qualquer outro valor é um nome:

`target`	Abre o link em
`_self`	A mesma aba ou frame. É o padrão.
`_blank`	Uma aba nova, sem nome
`_parent`	O pai do frame atual (igual a `_self` fora de frames)
`_top`	A aba inteira, saindo de todos os frames
qualquer nome, ex. `help`	A aba ou frame com esse nome, criada se não existir

Um target com nome é reaproveitado. Todo link com target="help" abre na mesma aba, então quem clica em cinco links de ajuda fica com uma aba, não cinco. _top é o que se usa dentro de um <iframe> quando um link deve substituir a página inteira, e não só o frame.

Abrir todos os links em nova aba com o elemento base

<base target="_blank"> no <head> define o target padrão de todos os links e formulários da 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>

O target próprio de um link vence o <base>. Use isso raramente: uma página em que todo link abre uma aba nova é chata de usar.

Abrir uma nova aba com JavaScript

window.open(url, '_blank') abre uma aba a partir de um script. Passe 'noopener' como terceiro argumento para ter a mesma proteção do atributo rel. Com ele, window.open retorna null em vez de uma referência à nova aba:

<!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>

Os navegadores bloqueiam window.open a não ser que ele rode em resposta a um clique ou tecla, então chame a função a partir de um event listener, não no carregamento da página nem depois de um timer. Se o destino é uma URL que o leitor poderia ver antes, um link com target="_blank" é mais simples e funciona sem JavaScript. O link em si está em link HTML.

Erros comuns

target="blank" sem o sublinhado. É um nome, não a palavra-chave. Abre uma aba nova na primeira vez e depois reaproveita essa aba para todo outro link com o mesmo nome.
target="_new". Também é só um nome, com o mesmo efeito: uma aba reaproveitada.
Colocar target em todo link. Links internos devem abrir na mesma aba. Quem quer uma aba nova sabe como conseguir.
Nenhuma indicação de que o link abre uma nova aba. Adicione um ícone e um texto oculto.
Adicionar noreferrer a links de parceiros ou de afiliados e depois não entender por que o parceiro não vê as indicações.

Perguntas frequentes

Como fazer um link abrir em nova aba no HTML?

Adicione target="_blank" à tag <a>: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. O navegador abre a página numa nova aba e mantém a página atual aberta.

Ainda preciso de rel="noopener" com target="_blank"?

As versões atuais de Chrome, Firefox e Safari aplicam noopener automaticamente aos links com target="_blank", então a página nova não consegue acessar a sua por window.opener. Escrever rel="noopener" não custa nada e protege visitantes em navegadores antigos, por isso a maioria dos guias de estilo ainda pede.

Qual a diferença entre noopener e noreferrer?

noopener corta a ligação entre as duas abas (window.opener é null na nova). noreferrer faz isso e também impede que o navegador envie a URL da sua página como referenciador, então o analytics do outro site vê a visita como direta.

O HTML consegue forçar um link a abrir numa nova janela em vez de uma aba?

Não. target="_blank" pede um novo contexto de navegação, e o navegador e as configurações do usuário decidem se será uma aba ou uma janela. Os navegadores atuais abrem uma aba.

Como abrir todos os links de uma página em nova aba?

Coloque <base target="_blank"> no <head>. Todo link sem target próprio passa a abrir numa nova aba. Isso também afeta formulários, então use só em páginas em que é mesmo isso que você quer.

Conceitos relacionados