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 😀

15
Subscribe
Notify of
guest
7 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!

7
0
Would love your thoughts, please comment.x
()
x