Abrindo links em nova aba: o atributo target

Na lição anterior, você conheceu o target="_blank" de passagem. Agora é hora de entender esse atributo com profundidade — seus valores, suas implicações de segurança, seus impactos na experiência do usuário e, principalmente, quando usá-lo e quando evitá-lo.

Parece simples, mas o target é um dos atributos mais mal usados do HTML. Dominar suas nuances faz diferença real na qualidade do código que você escreve.

O que é o atributo target

O atributo target define onde o conteúdo do link será aberto — em qual contexto de navegação o destino vai aparecer.

<a href="https://exemplo.com" target="_blank">Abrir em nova aba</a>

Por padrão — quando target não é informado — o link abre na mesma aba em que o usuário está navegando. O target existe justamente para mudar esse comportamento quando necessário.

Os valores do atributo target

_self — mesma aba (padrão)

<a href="/sobre" target="_self">Sobre nós</a>

Abre o link na mesma aba e janela atual. É o comportamento padrão de qualquer link — você raramente precisará escrever target="_self" explicitamente, mas é útil para documentar a intenção ou sobrescrever um target herdado de um elemento pai.

_blank — nova aba ou janela

<a href="https://exemplo.com" target="_blank">Abrir em nova aba</a>

Abre o link em uma nova aba — ou nova janela, dependendo das configurações do navegador e do sistema operacional do usuário. É o valor mais usado do atributo target no desenvolvimento web.

💡 A decisão de abrir em aba ou janela é do navegador, não do desenvolvedor. Você não tem controle direto sobre isso com HTML puro.

_parent — contexto pai

<a href="/pagina" target="_parent">Ir para a página</a>

Abre o link no contexto de navegação pai do elemento atual. Se a página está dentro de um <iframe>, o link abre na janela que contém o iframe — não dentro do iframe. Se não há contexto pai, se comporta como _self.

_top — contexto raiz

<a href="/pagina" target="_top">Sair do frame e abrir na janela inteira</a>

Abre o link no contexto de navegação mais externo — a janela principal do navegador, ignorando qualquer nível de iframe aninhado. Se não há frames, se comporta como _self.

Nome personalizado — aba nomeada

<!-- Primeiro clique: cria uma nova aba com o nome "painel" -->
<a href="/relatorio-jan" target="painel">Janeiro</a>

<!-- Segundo clique: reutiliza a aba "painel" já aberta -->
<a href="/relatorio-fev" target="painel">Fevereiro</a>

<!-- Terceiro clique: também reutiliza a mesma aba "painel" -->
<a href="/relatorio-mar" target="painel">Março</a>

Você pode passar um nome personalizado como valor do target. Se uma aba com aquele nome já estiver aberta, o link carrega nela. Se não existir, uma nova aba com aquele nome é criada.

Esse comportamento é útil em painéis onde você quer que vários links carreguem sempre na mesma aba auxiliar, sem abrir múltiplas abas.

Resumo dos valores

Segurança: o problema do window.opener

Quando um link com target="_blank" é clicado, o navegador abre uma nova aba — mas, por padrão em navegadores mais antigos, essa nova aba tem acesso à aba original por meio da propriedade JavaScript window.opener.

Isso cria uma vulnerabilidade conhecida como reverse tabnapping:

1. Usuário está na sua página (aba A)
2. Clica em um link externo que abre em nova aba (aba B)
3. A aba B, sendo maliciosa, executa:
   window.opener.location = "https://site-falso.com/sua-pagina"
4. Enquanto o usuário lê a aba B, a aba A silenciosamente
   carrega uma cópia falsa da sua página
5. Usuário volta para a aba A e vê uma página de login falsa

O ataque é sutil porque o usuário não percebe que a aba original foi modificada.

A solução: rel="noopener noreferrer"

<a
  href="https://site-externo.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Visitar site externo
</a>

• noopener → quebra a referência window.opener, impedindo que a nova aba acesse ou modifique a aba original
• noreferrer → implica noopener e também remove o cabeçalho Referer da requisição, impedindo que o site de destino saiba de qual URL o usuário veio

💡 Navegadores modernos (Chrome 88+, Firefox, Safari) já aplicam noopener automaticamente para _blank. Mas adicionar explicitamente ainda é uma boa prática para garantir compatibilidade com navegadores mais antigos e documentar a intenção de segurança no código.

O atributo rel: além da segurança

O atributo rel define a relação semântica entre a página atual e o destino do link. Ele não é exclusivo de links com target="_blank" — mas é especialmente importante nesse contexto.

Os valores mais relevantes:

<!-- Link patrocinado -->
<a href="https://parceiro.com" rel="sponsored noopener noreferrer" target="_blank">
  Parceiro comercial
</a>

<!-- Link em comentário de usuário -->
<a href="https://link-usuario.com" rel="ugc nofollow noopener" target="_blank">
  Link compartilhado por usuário
</a>

UX: quando usar — e quando não usar — target="_blank"

Esse é o ponto mais ignorado por iniciantes e um dos mais discutidos por profissionais. Abrir links em nova aba não é sempre uma boa ideia — e deve ser uma decisão consciente, não um hábito automático.

✅ Quando faz sentido usar _blank

<!-- Link para documento externo enquanto o usuário preenche um formulário -->
<p>
  Leia os
  <a href="/termos.pdf" target="_blank" rel="noopener">
    Termos de Uso
  </a>
  antes de continuar.
</p>

<!-- Link para ferramenta auxiliar externa -->
<p>
  Verifique seu código no
  <a href="https://validator.w3.org" target="_blank" rel="noopener noreferrer">
    Validador do W3C
  </a>
  sem sair desta página.
</p>

<!-- Link para mídia ou conteúdo complementar -->
<p>
  Assista ao
  <a href="https://youtube.com/watch?v=xyz" target="_blank" rel="noopener noreferrer">
    vídeo de demonstração
  </a>
  enquanto segue o tutorial.
</p>

Use _blank quando:

• O usuário está no meio de uma tarefa e perderia progresso ao navegar para outra página
• O link leva a um documento externo complementar
• O link aponta para um site completamente diferente e faz sentido manter sua página aberta

❌ Quando NÃO usar _blank

<!-- ❌ Não use _blank para navegação interna -->
<nav>
  <a href="/sobre" target="_blank">Sobre</a>      <!-- errado -->
  <a href="/blog" target="_blank">Blog</a>         <!-- errado -->
  <a href="/contato" target="_blank">Contato</a>   <!-- errado -->
</nav>

<!-- ❌ Não use _blank por padrão em todos os links externos -->
<a href="https://qualquer-site.com" target="_blank">Qualquer link</a>

Evite _blank quando:

• O link é de navegação interna do seu próprio site
• Abrir em nova aba interromperia um fluxo de navegação natural
• O usuário não se beneficia de ter as duas páginas abertas ao mesmo tempo

Acessibilidade: avisando o usuário

Abrir uma nova aba sem avisar o usuário é uma má experiência — especialmente para pessoas que usam leitores de tela ou têm dificuldades cognitivas. O botão 'voltar' do navegador não fecha a aba que foi aberta com _blank. Isso pode confundir usuários que esperam retornar ao estado anterior da página original.

Avise no texto do link

<!-- ✅ Aviso no próprio texto -->
<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">
  Documentação oficial (abre em nova aba)
</a>

Use o atributo title como reforço

<!-- ✅ title como complemento — não substituto -->
<a
  href="https://exemplo.com"
  target="_blank"
  rel="noopener noreferrer"
  title="Abre em nova aba"
>
  Documentação oficial
</a>

Use aria-label para leitores de tela

<!-- ✅ Informação completa para tecnologias assistivas -->
<a
  href="https://exemplo.com"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Documentação oficial, abre em nova aba"
>
  Documentação oficial
</a>

💡 O aria-label substitui o texto do link para leitores de tela. Use-o quando o texto visível não é suficiente para comunicar a ação completa ao usuário.

Exemplo prático: menu de navegação com links mistos

<nav>
  <!-- Links internos: sem target -->
  <a href="/">Início</a>
  <a href="/sobre">Sobre</a>
  <a href="/blog">Blog</a>
  <a href="/contato">Contato</a>
</nav>

<main>
  <h1>Recursos recomendados</h1>

  <p>
    Consulte a
    <a
      href="https://developer.mozilla.org/pt-BR/"
      target="_blank"
      rel="noopener noreferrer"
    >
      documentação do MDN (abre em nova aba)
    </a>
    para referências completas sobre HTML e CSS.
  </p>

  <p>
    Valide seu código no
    <a
      href="https://validator.w3.org"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Validador W3C, abre em nova aba"
    >
      Validador W3C
    </a>
    enquanto acompanha este tutorial.
  </p>
</main>

Resumindo

• O atributo target define onde o link será aberto
• _blank abre em nova aba — o mais usado no dia a dia
• _self é o padrão — abre na mesma aba
• _parent e _top são para contextos com iframes
• Nomes personalizados reutilizam abas já abertas
• Sempre use rel="noopener noreferrer" com _blank para evitar a vulnerabilidade de reverse tabnapping
• Avise o usuário quando um link vai abrir em nova aba
• Não use _blank por padrão — use com intenção e apenas quando beneficiar a experiência do usuário