Desenvolvimento HTML

Como fazer para o link abrir em nova aba (tag a do HTML)

21 de novembro de 2019

Como fazer para o link abrir em nova aba (tag a do HTML)

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.

tag a nova aba capa

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 😀

Subscribe
Notify of
guest
20 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Fernando M.

Muito obrigado por disponibilizar esse conteúdo! Parabéns pelo site.

Battisti

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 🙂

Diogenes Varela

Nos seus exemplos tem um ‘t’ a mais: htttps…

Battisti

boa Diogenes, vou ajustar! 😀

Jéssica Venturi

Me ajudou muito, tinha achado um outro codigo que nao estava funcionando obrigada

Edson Vieira

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

Battisti

valeu Edson!

Áurea

Muito Obrigada, Salvou!
Parabéns pelo trabalho

Battisti

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

otavio marangonni

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>

Battisti

É só colocar o mesmo atributo ai na sua tag!

Mari Ângela Luciano

Explicação simples, rápida e prática… show!

Battisti

Valeu!!

lucas

muito bom o conteúdo, rápido e bem explicado. obrigado!

Battisti

valeuuu!

AUDERVAN DA COSTA SANTOS

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?

Last edited 11 meses atrás by AUDERVAN DA COSTA SANTOS
Battisti

Opa Audervan, pior que não, não temos controle na próxima aba, só na que estamos atualmente…

More Manaus

Parabéns por divulgar esse informação. Parece algo simples, mas pra quem não conhece é de grande ajuda.

Battisti

Com certeza amigo, e é algo super utilizado =)

ronaldo

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 »

20
0
Would love your thoughts, please comment.x