Trabalhando com a tag âncora no HTML

Tendo em vista que inicialmente a principal ideia quando foi criado o HTML era facilitar o compartilhamento de documentos, mas, como consequência do avanço da programação, possuímos uma ferramenta que vai além do que podemos imaginar.

Ampliando a ideia de compartilhamento de documentos, atualmente, temos uma ferramenta que consegue vincular um link externo, por exemplo, dentro do nosso HTML.

Veremos a seguir sobre a tag âncora.

O que é a tag de âncora?

A tag <a>, conhecida como tag de âncora, é responsável por vincular os demais documentos que o nosso HTML possui, links internos e externos.

Para conseguirmos declarar essa tag, devemos incluir o atributo href e uma frase ou palavra dentro da tag <a>.

<a href="https://www.treinaweb.com.br/">TreinaWeb</a>

A palavra TreinaWeb irá “esconder” o link, quando clicado, será direcionado para o site da TreinaWeb.

Curso HTML5 + CSS3 - Criando sites acessíveis

Conhecer o curso

Atributos tag âncora

Além de href, a tag <a> possui alguns outros atributos, e cada um deles tem o seu papel específico. Esses atributos são: target e rel.

Href

Em primeiro lugar, temos o href (hypertext reference), em português, referência para hipertexto, que nada mais é do que a tag onde colocamos a URL do site que queremos vincular ao nosso HTML. É necessário adicionarmos a URL por completo, isso inclui o protocolo https. Ao incluirmos a URL do site desejado, basta colocarmos uma palavra ou frase entre o fechamento e abertura da tag <a>. Quando clicarmos nessa palavra/frase, seremos direcionados ao site vinculado. É possível também utilizarmos a tag <a> apenas para voltar ao topo da nossa página, para isso, inserimos uma cerquilha. Ficando dessa forma:

<a href="#">Topo</a>
<a href="https://www.treinaweb.com.br/">TreinaWeb</a>

Target

Logo após, temos o atributo target, utilizamos ele para especificar onde iremos visualizar o link após clicarmos, seja ele interno ou externo. Para isso, vamos atribuir os seguintes valores:

Para que o link seja aberto em uma nova aba:

<a href="https://www.treinaweb.com.br/" target="_blank">TreinaWeb</a>

Mas, caso queira que o link seja aberto na mesma aba, sendo esse seu comportamento padrão, basta declarar:

<a href="https://www.treinaweb.com.br/" target="_self">TreinaWeb</a>

Rel

Por fim, temos o atributo rel (relationship), em português, relação. É muito importante que saibamos que o atributo rel contém alguns valores, sendo eles distintos uns dos outros. Iremos abordar os valores de nofollow, noopener e noreferrer, que está ligado diretamente com o noopener.

A forma correta para declararmos rel com o valor de nofollow é:

<a href="https://www.treinaweb.com.br/" rel="nofollow">TreinaWeb</a>

Portanto, quando fazemos isso, estamos basicamente falando para o Google não dar importância para o link que estamos referenciando, ou seja, ele irá ler o nosso link de âncora, apresentar ao usuário, porém, o mesmo não será ranqueado.

Em outras palavras, sua principal finalidade é evitar com que pessoas paguem desenvolvedores de sites para aumentarem a visualização dos seus links (ranqueamento). Isso é feito quando declaramos a tag de âncora sem o atributo rel com o valor de nofollow.

O JavaScript possui uma característica que permite que uma nova página obtenha total controle da aba em que foi aberta através da referência da tag <a>. Portanto, tendo esse controle, é possível abrir e acessar o site original, e assim, obter informações sigilosas.

Curso JavaScript - Fundamentos

Conhecer o curso

Sendo assim, para ser possível bloquear essa aplicação, declaramos o atributo rel com dois valores, noopener, que irá impedir que esse recurso do JavaScript seja utilizado. Já o valor noreferrer, não permite que essa transmissão de informações para a nova página seja feita.

<a href="https://www.treinaweb.com.br/" rel="noopener noreferrer">TreinaWeb</a>

Declarações da tag âncora

Para declararmos <a> com os atributos target e rel, fazemos assim:

<a href="https://www.treinaweb.com.br/" target="_blank" rel="noopener noreferrer">TreinaWeb</a>

Da mesma forma, aplicamos em <a> o atributo target com o valor de _self e rel com valor de nofollow:

<a href="https://www.treinaweb.com.br/" target="_self" rel="nofollow">TreinaWeb</a>

Devemos lembrar que, o valor _self faz com que o nosso link seja aberto na mesma aba de navegação.

No navegador, vamos visualizar dessa forma:

Sendo assim, quando clicarmos, teremos esse resultado:

Esse é o comportamento do valor _blank quando aplicamos no atributo target, abrindo o link em uma nova aba.

Já o _self fica dessa forma:

Esse é o comportamento do valor _self quando aplicamos no atributo target, abrindo o link na mesma aba de navegação.

Curso Acessibilidade - Introdução

Conhecer o curso

Tag âncora com link interno

Além do mais, uma das funcionalidades da tag <a> é nos permitir incluir links internos, ou seja, no nosso próprio documento HTML, ou até mesmo externos, como já dito anteriormente.

Para aplicarmos essa função, devemos primeiramente criar dois documentos HTML, podendo ser, por exemplo, home.html e sobre.html. Feito isso, agora devemos adicionar dentro do body do nosso home.html, a tag <a>, e dentro dela, iremos vincular nossa segunda página, sobre.html. Dessa forma:

<a href="./sobre.html">Página Sobre</a>

Quando clicamos na frase “Página Sobre”, seremos direcionados para a mesma. Quando não atribuímos o valor _blank para o atributo target, ele irá assumir por padrão o valor de _self, abrindo o link na mesma aba de navegação.

Podemos fazer com que a página sobre consiga acessar a página home, sendo o inverso do que fizemos antes.

<a href="./home.html">Voltar para Página Home</a>

Tag de âncora com link externo

A ideia é a mesma quando vamos adicionar links externos, escolhemos qual link queremos vincular a tag âncora e adicionamos o mesmo.

<a href="https://www.treinaweb.com.br/blog/">Blog da TreinaWeb</a>

Como dito anteriormente, é necessário adicionarmos a URL por completo, incluindo o protocolo HTTPS.

Conclusão

Hoje, vimos a importância e a funcionalidade da tag de âncora, agora podemos aplicá-la em nossos projetos, deixando assim mais dinâmico e amplo, adicionando referências bibliográficas caso seja necessário, linkando redes sociais, e qualquer outro site, link interno ou externo que quisermos.

É de suma importância que consigamos entender cada funcionalidade e atributo apresentado neste artigo, pois o uso deles fazem total diferença na prática.