Neste artigo vou mostrar como fazer para o link abrir em nova aba, mais conhecida como tag <a>, apenas com o recurso nativo do próprio HTML.
Este conteúdo também está disponível em vídeo:
Sabemos que a forma convencional de adicionar links para uma determinada página/URL, substitui a página atual
Porém alguns projetos tem como requisito que a aba atual se mantenha e o link abra em uma nova página
Isso acontece muito quando estamos mandando o usuário para uma página que muda o contexto ou é outro site
Estrutura da tag <a>
Primeiramente vamos relembrar do que se constitui uma tag de link
<a href="https://www.google.com">Ir para o Google</a>
Nós devemos abrir e fechar a tag, e inserir o atributo href, que vai conter a URL de destino
Além disso, adicionamos um texto que é o que o usuário lê e também fica com a marcação de estilo que o HTML tem para esta tag
Tag <a> abrindo link em nova página
Agora vamos ver o que precisa mudar, para quando o usuário clicar a página ser aberta em uma nova aba
<a href="https://www.google.com" target="_blank">Ir para o Google em nova página</a>
Para resolver este problema adicionamos o atributo target com o valor _blank
Apenas com esta ação, o HTML mesmo já vai se encarregar de abrir uma nova aba para o usuário, faça o teste! 😀
É engraçado como esta solução é simples, porem as vezes desconhecida
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
E muitas vezes pensamos que temos que resolver este tipo de problema com JavaScript, por desconhecimento deste recurso nativo
Na verdade muitos destes ‘problemas’ simples, as vezes são resolvidos de formas alternativas não tão performáticas…
Conclusão
Neste artigo vimos que para encaminharmos o usuário para outro link, abrindo em uma nova página, devemos adicionar o parâmetro target=”_blank”
Ele se encarregará de fazer essa função para nós, de forma nativa e bem limpa no código
Além disso, caso você queira voltar para a maneira tradicional, basta apagar este atributo da tag <a>
E assim aprendemos como fazer para o link abrir em nova aba, até o próximo post!
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
Muito obrigado por disponibilizar esse conteúdo! Parabéns pelo site.
Eu que agradeço Fernando, conheça também nosso canal no YouTube: https://www.youtube.com/channel/UCDoFiMhpOnLFq1uG4RL4xag/ (vários cursos gratuitos!) Abraço 🙂
Nos seus exemplos tem um ‘t’ a mais: htttps…
boa Diogenes, vou ajustar! 😀
Me ajudou muito, tinha achado um outro codigo que nao estava funcionando obrigada
Incrivel! Muito obrigado pela ajuda! já tinha revirado a net e não encontrei nada que fosse simples e funcionasse realmente! Deus abençõe/1
valeu Edson!
Muito Obrigada, Salvou!
Parabéns pelo trabalho
de nada Áurea, fica a vontade também para conhecer meu catálogo de cursos: https://www.udemy.com/user/matheus-battisti/
E o canal no YouTube: https://www.youtube.com/channel/UCDoFiMhpOnLFq1uG4RL4xag
Bom dia! Como eu faria para abrir em outra guia este código? Obrigado!
<a href=’link’ rel=’nofollow’ title=’Like us’><i class=’fa fa-spotify’/></a>
É só colocar o mesmo atributo ai na sua tag!
Explicação simples, rápida e prática… show!
Valeu!!
muito bom o conteúdo, rápido e bem explicado. obrigado!
valeuuu!
Excelente explicação,
uma dúvida,
para encaminharmos o usuário para outro link, abrindo em uma nova página, mas ocultando o endereço, abrir janela sem barra de endereço, é possível?
Opa Audervan, pior que não, não temos controle na próxima aba, só na que estamos atualmente…
Parabéns por divulgar esse informação. Parece algo simples, mas pra quem não conhece é de grande ajuda.
Com certeza amigo, e é algo super utilizado =)
oi eu tenho um script hospedado no google sites e gostaria d emanter ainda nele. por ser gratuito. Gostariua que me ajudasse a reconstruir ele. O projeto é uma fila online. Ao abrir a pagina encontrara 7 nomes, porem a realidade é que tera 10 nomes no total sendo os 3 ultimos ocultos. Havera um campo para registrar o nome do novo usuario para entrar na fila. Uma vez colocada o nome, ao clicar em adicionar devera se criada uma nova pagina copiando toda a lista e ja alterando da seguinte forma. O nome ira para o final da fila(oculto)… Read more »
UMA pergunta como faz para poder abrir em uma aba anonima?
Se alguem conseguir responde agradeço muito !!!
Queria clicar na imagem para abrir outra página, como faço?