Abrindo Links em uma Nova Janela em HTML: Atributo target="_blank"
Resumo Rápido
Para permitir que os navegadores abram links em uma nova guia, use o atributo target="_blank" nas tags <a>:
<a href="https://exemplo.com" target="_blank">Exemplo</a>O atributo target permite que os visitantes permaneçam em seu site enquanto navegam para outros recursos. Para aumentar a segurança e a proteção da privacidade, é recomendável adicionar rel="noopener noreferrer":
<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">Exemplo Seguro</a>Os atributos mencionados acima aumentam a segurança do usuário e garantem a proteção da privacidade dos dados.
Consequências e Compromissos
Nesta seção, abordaremos os principais aspectos a serem considerados ao aplicar a estratégia target="_blank".
Preocupações de Segurança
Usar o atributo target="_blank" sem configurações adicionais pode apresentar um risco de segurança. A página aberta através do link pode acessar sua janela, potencialmente violando políticas de segurança. O atributo rel="noopener" resolve essa questão.
<a href="https://exemplo.com" target="_blank" rel="noopener">exemplo.com</a> <!-- Agora estamos seguros, como uma fortaleza bem guardada -->Protegendo a Privacidade do Usuário
Com o atributo rel="noreferrer", você pode proteger a privacidade da origem. Se utilizado, a nova página não poderá determinar de onde o usuário veio. Proteja a privacidade do seu site; ninguém gosta de vizinhos curiosos.
<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">exemplo.com</a> /* Agora somos verdadeiros mestres no jogo de esconde-esconde! */Respeitando as Preferências do Usuário
Alguns usuários configuram seus navegadores para ignorar suas configurações sobre a abertura de links. Lembre-se de que navegadores que não suportam guias abrirão os links em novas janelas. Respeite as preferências dos seus clientes!
Outros Usos do Atributo target
Considere outros usos do atributo target:
target="_self": Ação padrão, abre o link na janela atual (iframe).target="_parent": Abre o link na janela pai (quadro pai).target="_top": Remove todos os quadros e abre o link em uma janela completa.
Não use target="_tab"; esse valor não é padrão e pode causar problemas.
Visualização
Seu site contém inúmeros links. Seu olhar pode recair sobre um deles, certo?
Se você clicar em um link sem o atributo target, o “paisagem” mudará, mas seu “navio”, ou seja, seu navegador, permanecerá o mesmo.
No entanto, usar `target="_blank"` pode ser comparado a chamar seu avião particular para uma nova aventura, enquanto seu “navio” aguarda pacientemente por você no porto.
Em HTML, fica assim:
```html
<a href="https://exemplo.com" target="_blank">Chame meu avião!</a>Assim, o resultado aparece da seguinte maneira:
Sem usar o atributo target: Ainda estamos a bordo do nosso navio.
Ao abrir uma nova guia: O avião particular está pronto para decolar, e você não está mais no seu velho navio.
## Realizando uma Análise Detalhada de Links
### Controle do Usuário: Clique do Meio e Ctrl + Clique
Os usuários têm a opção de **abrir links em novas guias** usando o botão do meio do mouse ou a combinação Ctrl+clique. Isso lhes dá controle adicional, mas não substitui o `target="_blank"`.
### Trabalhando com Janelas: Quadros Nomeados
Os entusiastas de quadros podem usar `target="nomedoframes"` para abrir um link em um quadro específico.
### Garantindo Acessibilidade do Conteúdo
Certifique-se de que seus **links sejam compreensíveis** para leitores de tela, seguindo as diretrizes do [A11Y Project](https://www.a11yproject.com/checklist/#links). Todos os usuários da internet devem ter oportunidades iguais!
## Recursos Úteis
1. [Atributo target em HTML](https://www.w3schools.com/tags/att_a_target.asp) — Aqui você pode aprender mais sobre o controle da abertura de links com o **atributo target**.
2. [O elemento âncora - HTML: Linguagem de Marcação de Hipertexto | MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a) — Um artigo abrangente dedicado ao elemento `<a>` no portal MDN Web Docs.
3. [Padrão HTML](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element) — Descrição oficial da funcionalidade de links hipertextuais em formato HTML.
4. [rel=noopener | Posso usar... Tabelas de suporte para HTML5, CSS3, etc.](https://caniuse.com/rel-noopener) — Aqui você pode descobrir sobre **o suporte ao atributo `rel="noopener"` por diferentes navegadores**.
5. [Links para destinos de origem cruzada são inseguros | Lighthouse | Chrome para Desenvolvedores](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/) — Saiba mais sobre medidas de precaução para proteger seu site de **sequestros de guia**.