Diferenças Entre target="_blank" e target="_new" no HTML: Um Guia
Resposta Rápida
Para abrir links em uma nova aba do navegador, recomenda-se usar target="_blank". O atributo target="_new" não está em conformidade com os padrões e pode levar a um reaproveitamento indesejado de abas. Veja como deve ser no código:
<!-- Bom exemplo: abrindo um link com segurança em uma nova aba -->
<a href="https://example.com" target="_blank" rel="noopener">Visite o Site Exemplo</a>Portanto, é aconselhável escolher target="_blank" para abrir links externos e evitar o não padrão target="_new". Para aumentar a segurança e o desempenho, utilize rel="noopener" e rel="noreferrer".
Segurança e Otimização: O Papel do "noopener" e "noreferrer"
Ao usar target="_blank", é importante considerar a segurança e a otimização. O atributo rel="noopener" ajuda a proteger o seu site bloqueando o acesso da nova aba à sua página através de window.opener, minimizando tais vulnerabilidades.
Além disso, rel="noreferrer" proporciona segurança extra garantindo anonimato e aumentando a velocidade de carregamento da página ao impedir a transferência do cabeçalho HTTP Referer.
Exemplo de uso seguro:
<!-- Segurança: Confiabilidade comparável a um banco suíço. Excelente velocidade de carregamento da página. -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visite o Site Exemplo</a>Assim, entender e utilizar esses atributos protege contra vulnerabilidades, especialmente quando o conteúdo gerado pelo usuário inclui links externos.
Um Jogo de Nomes: Entendendo o Comportamento do Navegador com Alvos Nomeados
O HTML possui nomes reservados especiais para alvos. "_blank" é um deles. Quando você atribui target="NomeDaJanela", o navegador procura uma janela ou aba com esse nome e, se encontrada, a utiliza. Se não, cria uma nova.
"_new" é interpretado pelos navegadores como um alvo nomeado:
<!-- Encruzilhada: Pode abrir uma nova janela a seu critério -->
<a href="https://example.com" target="_new">Visite o Site Exemplo</a>Essa abordagem pode resultar em um comportamento ambíguo, uma vez que "_new" não é tratado como um nome especial ao contrário de "_blank", "_self", "_parent" e "_top". A solução é simples: evite usar target="_new" para previsibilidade e facilidade de navegação.
Textos Sagrados: Nomes de Alvo Reservados e Padrões HTML
A especificação HTML descreve detalhadamente os nomes de alvos reservados e seu comportamento, garantindo sua padronização e universalidade:
"_blank": Abre uma nova aba ou janela a cada clique."_self": Abre o conteúdo na janela ou quadro atual."_parent": Navega para o quadro pai."_top": Exibe o conteúdo em modo de tela cheia.
Para a formatação de links mais eficaz, utilize esses padrões e a especificação HTML5.
Escutando Especialistas: Opiniões de Especialistas sobre Atributos "rel"
As opiniões de especialistas, como as de Matthias Bynens e Jake Archibald, têm um valor particular. Seus escritos sobre os atributos "rel" são considerados leitura essencial para qualquer desenvolvedor web e servem como um excelente guia sobre segurança e melhores práticas.
Visualização
As diferentes opções para o atributo target podem ser visualizadas como portas em uma casa:
target="_blank": 🆕🌐 Cada porta leva a um novo cômodo.target="_new": 🔁🌐 Todas as portas levam ao mesmo cômodo.
Assim, target="_blank" leva você para um lugar novo de forma confiável, enquanto com target="_new", você pode acabar em um espaço familiar.
Recursos Úteis
- MDN - Elemento Âncora
- Atributo target no HTML - W3Schools
- Padrão HTML - Alvo de Hiperlinks
- Quando usar target="_blank" - CSS-Tricks
- Frames em Documentos HTML - W3C
- WebAIM: Links Hipertextuais - Criando Links Acessíveis
- Posso Usar... Tabelas de Suporte para rel=noopener