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

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="htttps://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="htttps://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 😀

0

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Deixe um comentário

avatar
  Subscribe  
Notify of