<a>
Nesta documentação de HTML veremos como a tag <a> pode ser utilizada para criar alguns tipos diferentes de links
Apresentaremos aqui como utilizar a tag <a>.
<a>: na prática
<a href="contato.html">Contato</a>
<a>: Atributos
A tag <a> possui alguns atributos que são importantes para o seu funcionamento, veremos aqui alguns dos principais.
href
Esse é o principal atributo da tag <a>. No href é onde colocamos o endereço do link.
Veja:
<a href="www.meusite.com.br/contato.html">Contato</a>Ao clicar nesse link o navegador vai carregar a página informada no href.
target
Esse atributo indica para o navegador onde o link deverá ser aberto, se na mesma aba, em outra aba, ou mesmo em uma nova janela do browser.
Quando o atributo target não é utilizado, seu comportamento padrão é abrir o link na aba atual.
Veja alguns exemplos de uso do target nos Códigos 3 e 4.
_self
<a href="contato.html" target="_self">Contato</a>_self é o valor padrão, e vai abrir o link na página atual. Quando não informamos o target, _self é utilizado.
_blank
<a href="https://www.bing.com" target="_blank">Buscar no Bing</a>_blank é utilizado para abrir links em uma nova aba, porém, o usuário pode mudar o comportamento do navegador para que seja aberto em uma nova janela. _blank é indicado para uso com links externos, assim o usuário acessa o link sem sair da sua página.
Veja o comportamento dos diferentes tipos de target aqui:
See the Pen Target by Eduardo Soares (@eduscxbox) on CodePen.
rel
Esse atributo é muito utilizado para fins de SEO, juntamente do valor nofollow. Também é recomendado utilizar os valores noreferrer e noopener para evitar exploits JavaScript quando estiver utilizando o atributo target="_blank", como vemos nos Códigos 5 e 6.
<a href="https://www.bing.com" rel="nofollow">Bing</a><a href="https://www.bing.com" target="_blank" rel="noreferrer noopener nofollow">Bing</a>O atributo rel não altera o comportamento do link.
<a>: Tipos de link
É possível criar diferentes tipos de links com a tag <a>, seja para referenciar uma área específica de uma página, uma página dentro do seu site, ou mesmo um link para outro site. Veja a seguir exemplos dos três tipos de links.
âncora
A âncora é um tipo de link que aponta para uma parte específica da página atualmente carregada. Para criar uma âncora, passamos o id do elemento que queremos navegar para o atributo href. Veja:
See the Pen Untitled by Eduardo Soares (@eduscxbox) on CodePen.
Link interno
Um link interno é um link para outra página dentro do seu próprio site. Para definir um link interno podemos fazer de duas formas, passando a URL completa ou passando o caminho relativo da página que você quer navegar, como mostra o Código 7.
<a href="https://www.devmedia.com.br/cursos/concluido/"> Meus Certificados </a>No site da DevMedia, ao clicar no link 'Meus Certificados' no menu, você sai da página atual e vai para a página de certificados. Esse é o comportamento de um link interno, como mostra a Animação 1.
Link externo
Um link externo é aquele que aponta para outro site além do seu. No geral, links externos utilizam o atributo target com valor _blank, para não ser aberto na aba atual.
Em alguns casos também pode ser utilizado o atributo rel com o valor nofollow para motivos de SEO. Veja um exemplo no Código 8.
<a href="https://www.bing.com" target="_blank" rel="nofollow">Acesse o Bing</a>Ao clicar em um link externo você será enviado para a página informada no href.
See the Pen Link Externo by Eduardo Soares (@eduscxbox) on CodePen.
Através do uso de links você permite que o seu usuário navegue pelas páginas do seu site e acesse conteúdos externos.
