HTML: O elemento âncora [a] ~ para que serve e como funciona

Hoje quero escrever sobre algo simples e básico no HTML: O elemento âncora (<a>).
O que é, como funciona, como pode ser estilizado...

O elemento <a> em HTML (ou elemento âncora) com o atributo href, serve para criar hiperligações (links) no teu blogue ou site.
Essas ligações podem ser para outras páginas na net, endereços de e-mail, ligações telefónicas (em dispositivos móveis ou com um aplicativo apropriado instalado), endereços de arquivos, outras páginas dentro do teu blogue, ou até para locais dentro da mesma página.

DEMONSTRAÇÃO:

HTML CSS

          
<ul>
  <li><a href="omeublogue.blogspot.com">Blogue</a></li>
  <li><a href="mailto:omeuemail@exemplo.com">E-mail</a></li>
  <li><a href="tel:+123456789">Telefone</a></li>
</ul>
 

li {
  margin-bottom: 5px;
}
ul li::marker {
  content: "\2911  ";
  color: #8dfb84;
  font-size: 22px;
}
 

Resultado

• Blogue
• E-mail
• Telefone

Resumo básico da formação duma URL, ou seja o conteúdo do atributo href no elemento âncora:

protocolo HTTPS/HTTP https://

nome de domínio cqapa.blogspot.com

caminho /2025/09/o-elemento-ancora.html

Query Strings e variáveis ?m=1

âncora #exemploUM

---

O atributo href

Conforme o conteúdo que colocamos no atributo href, assim podemos determinar o destino da ligação criada.
Existem 3 tipos de hiperligações (links), e a seguir mostro-te alguns exemplos práticos:

1.           
   <a href="#exemploUM">Vai para algum local nesta mesma página</a>
    

   Este é um link interno (ou âncora), e leva-te para um elemento existente dentro da mesma página onde colocamos a ID, que ser única, da seguinte maneira:

             
   <div id="#exemploUM"></div>
    

   Podes colocar a ID para onde se dirige a ligação em qualquer elemento HTML, e a menos que lhe dês um estilo personalizado, este tipo de ligação apresenta-se tal como qualquer outro link.
   Podes testar como funciona clicando aqui: Vai ver a Demonstração acima

2.           
   <a href="/p/my-mods.html">Uma página dentro deste blogue</a>
    

   Este link é local, ou seja, dirige o visitante para uma página dentro do próprio blogue.
   Pelo conteúdo parcial da href, é também considerado uma URL relativa.
   Podes testar visitando a página neste mesmo blogue onde partilho Os Meus Mods. ;)

   A ligação acima abre numa nova janela/separador, embora no respectivo código não esteja esse atributo porque irei falar nisso a seguir e então mostrarei como funciona essa parte.

3.           
   <a href="https://www.google.com/">Google</a>
    

   Este é um link global, o tipo de ligação que é utilizada para guiar o leitor do teu blogue para outros blogues ou sites na net.
   Pelo conteúdo mais completo da href, é também considerado uma URL absoluta.
   Para demonstrar a ligação do código deste exemplo, podes visitar a página inicial do Google.

   Dentro deste tipo de links ainda existem aqueles que em vez de te levarem a outros sites, servem outros propósitos:

   • Ligação ao E-Mail

     Para criar links que abrem no programa de correio eletrónico do utilizador e lhe permitem enviar uma nova mensagem, basta escrever dentro do atributo href o protocolo mailto:
     No entanto, se o utilizador não tiver um programa de e-mail instalado, este link não vai funcionar.
     A estrutura básica é a seguinte:

     <a href="mailto:enderecodeemail@exemplo.com">Envia um E-mail</a>
      

     Podemos ainda adicionar alguns parâmetros para preencher automaticamente outros campos do e-mail, mas não vou entrar nesses detalhes agora.
     Um aviso sobre este tipo de link: Existem bots maliciosos cuja única função é vasculhar páginas na Net para recolher endereços de e-mail, o que pode levar a um aumento de spam.

   • Link de download

     É possível criar uma ligação que permite baixar directamente um ficheiro do seu local de alojamento.
     O primeiro passo é, obviamente, alojar o ficheiro num site que permita esse tipo de ficheiros e que providencie o necessário link para colocar na ligação a colocar na nossa página.

     Depois colocamos a ligação na nossa página da seguinte maneira:

     <a href="endereco-do-arquivo-a-baixar" download>Nome do arquivo a baixar</a>
      

     O que resulta em algo do tipo:

     Podes testar baixando directamente um dos ficheiros que partilho na página dOs Meus Mods.

     Outra vantagem do atributo download é que além de ficheiros, também pode ser utilizado para que o visitante baixe uma imagem somente clicando na mesma.
     Podes ainda alterar o nome do ficheiro ao baixar colocando o novo nome no atributo download:

     <a href="endereco-da-imagem-a-baixar" download="novo-nome-da-imagem"><img src="endereco-da-imagem-a-apresentar"/></a>
      

     O que escreveres dentro do atributo download será o novo nome do ficheiro após ser baixado.
     Não existem restrições ao é permitido escrever, e o navegador irá detectar automaticamente a extensão de ficheiro correcta e adicioná-la ao ficheiro (.img, .pdf, .txt, .html, etc.).

     Se o atributo download não ter definido este nome, será utilizado o nome do ficheiro original.
     Outra coisa a ter em conta, no caso de alguns ficheiros tal como as imagens, ligações com o atributo download só funcionam em arquivos com a política de mesma origem, ou seja que se originam do mesmo site.

     Exemplo de 2 imagens com o atributo download, a primeira está alojada no Google Fotos enquanto a segunda utiliza a codificação Base64 para contornar a política de mesma origem somente para este exemplo:

     

     

   • Link em imagens, divs, spans, etc...

     Como puderam ver no exemplo anterior, também se pode utilizar imagens em vez de texto nas ligações que escreve.
     Mas não é só... também podemos utilizar divs, spans, ou praticamente qualquer outro elemento HTML para o fazer utilizando um pouco de CSS para ficar como desejamos. :)

     Não vou repetir o exemplo da ligação com imagens.
     Podem verificar exemplos desses na imagem ao cimo do artigo e no exemplo anterior do atributo download.
     Assim vou exemplificar como usar alguns elementos HTML em lugar duma imagem ou texto numa ligação:

     DEMONSTRAÇÃO:

     HTML CSS

               
     <a href="endereco-do-link" target="_blank">
         <div>
           <span></span>  
           <p>Visita a minha ligação</p>      
         </div>
     </a>
      

     .div {
     	background: radial-gradient(ellipse at center, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%);
     	text-align: center;
     	width: 95%;
     	height: 200px;
     	display: block;
     	margin: 10px auto;
     	position: relative;
     }
     .span {
     	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbp9oVgypGEroSwuRYJz6EuxNqMEiAJQ-S4KTSxD8sGWzcJMiOBgQsEppHfjeW2yKtlWq8yt9esdQ2pzooEWw9kRxQ4oVhCn9mwgxky86IQkMVCw4isiBc6T6XWGpVnlWU28m3xWdXOaBzm9u-P2WW7ucyGubnRs4NiCJ0ccQ-t9kBdWAmRrZ8ax2xvVG/s200/WBCtPoE_0.jpg) no-repeat 50% 50%/cover;
     	width: 100%;
     	height: 100%;
     	position: absolute;
     	left: 0;
     	top: 0;
     	bottom: 0;
     	right: 0;
     	filter: blur(1.5px) opacity(0.65);
         transition: filter .3s linear;
     }
     .div p {
     	display: block;
     	position: absolute;
     	margin: 35% auto;
     	font-family: 'Metamorphous', serif;
     	color: #fc4;
     	text-shadow: -1px -1px 0 rgba(69, 36, 3, .5), 1px -1px 0 rgba(69, 36, 3, .5), -1px 1px 0 rgba(69, 36, 3, .5), 1px 1px 0 rgba(69, 36, 3, .5);
     }
     a:hover .span{
       filter: blur(.5px) opacity(0.85);
     }
      

     Resultado

     Ligação para o artigo com a imagem de fundo

   • Ligação com números de telefone

     Em blogues pessoais como meu, não vejo muito uso em providenciar ligações com números de telefone para que me possam contactar por esse meio...
     Mas compreendo a sua utilidade em caso de empresas ou alguém que se serve do seu blogue para ganhar dinheiro e quer estar sempre contactável. (c)
     Para colocar uma ligação que possibilite fazer uma chamadas telefónica, basta escrever dentro do atributo href o protocolo tel: seguido do número de telefone:

     <a href="tel:+351123456789">+351 123 456 789</a>
     <a href="tel:987654321">987 654 321</a>
      

     O comportamento da ligação tel: varia de acordo com a capacidade do dispositivo:

     • Os dispositivos móveis (Smartphones, tablets, etc...) marcam o número automaticamente.
     • A maioria dos sistemas operativos têm ou podem instalar programas que fazem chamadas, como o Google Meet, Microsoft Teams,WhatsApp ou o FaceTime (Apple).
     • Alguns sites podem fazer chamadas telefónicas com o registerProtocolHandler.
     • Outros comportamentos incluem salvar o número nos contactos ou enviá-lo para outro dispositivo.

   • Javascript nos links

     Dentro do atributo href também podemos colocar javascript, mas essa é uma prática desencorajada porque pode levar à execução de código que pode prejudicar a acessibilidade, uma vez que se desvia do comportamento normal das ligações.
     Não vou entrar neese ninho de vespas neste artigo, mas caso tenham curiosidade podem visitar a ligação acima.

Podemos também misturar os tipos de link quando temos que indicar ao leitor uma secção específica num outra página ou blogue, desde que exista no destino algo que sirva como âncora.
Por exemplo:

          
<a href="/2019/08/spellforce-2-segunda-trilogia.html#SF2DS">SpellForce 2: Dragon Storm</a>. 
<a href="https://support.google.com/accounts/answer/27441#existingemail">Criar uma Conta do Google com o teu e-mail actual</a>. 
 

Um dos erros mais comuns e que é algo a evitar ao escrever qualquer tipo de ligação, no qual eu ainda me descuido, é colocar algo do tipo:

          
Se quiseres saber mais sobre mim, clica <a href="/p/acerca.html">aqui</a>.
 

Isto resulta num link fraco e pouco acessível em termos de texto, que deve sempre indicar o destino da ligação em causa.
No entanto e caso não seja possível escrever um texto mais adequado ao destino da ligação, uma forma de contornar esse problema é simplesmente modificar um pouco a escrita de maneira a colocar mais texto da frase onde se encontra o link dentro da parte do mesmo:

          
Clica aqui, se quiseres <a href="/p/acerca.html">saber mais sobre mim</a>.
 

O atributo target

O atributo target é onde definimos o comportamento da ligação, onde se vai apresentar o URL clicado: se abre na mesma janela ou noutra, se ao clicar move a página para o topo, etc...
As seguintes palavras-chave têm significados especiais referente ao destino da URL:

• _self: Abre a ligação na mesma janela/separador. (Este é comportamento padrão, mesmo que o atributo não esteja presente)
• _blank: Normalmente abre a ligação num novo separador, a menos que o visitante tenha configurado o seu navegador para abrir numa nova janela.
  Esta é uma definição muito utilizada porque permite que o leitor visite ligações a partir da nossa página sem sair dela.
• _parent: Vem do tempo em que se utilizavam muitas iframes, algumas dentro de outras, e este parâmetro era utilizado para que uma ligação numa dessas iframes interiores se abrisse na iframe acima dessa.
  Caso não exista _parent na ligação, a mesma comporta-se como _self.
  Hoje em dia é algo praticamente obsoleto e muito raramente utilizado.
• _top: Mais um parâmetro que se utiliza em conjunto com uma iframe., neste caso faz com as ligações dentro da dita cuja se abram na janela onde se encontra a mesma.

Nota: Quando utilizares o atributo target, adiciona ao link o rel="noreferrer noopener" para evitar possíveis aproveitamentos ilícitos da API window.opener
Por exemplo, numa ligação a outra página com target="_blank" irá executar a nova página no mesmo processo que a tua, o que significa que se a nova página conter muitos códigos JavaScript em execução, o desempenho da tua página poderá ser prejudicado.
Isto também pode ser evitado usando rel="noreferrer noopener".

O atributo title

O atributo title é opcional e pode ser adicionado em vários tipos elementos HTML além dos links.
A sua função é fornecer informações extras ou uma descrição de um elemento, que é exibida quando o leitor passa o cursor sobre ele.

Nem todos os navegadores exibem a informação do atributo title sem que o utilizador assim o defina.
O estilo e o comportamento exacto de como essa informação vai ser visível também varia conforme o navegador e dispositivo utilizado.

Podemos aplicar o title a quase todos os elementos HTML para melhorar a acessibilidade e a usabilidade, fornecendo contexto adicional que não é imediatamente aparente no monitor.
Em relação às ligações, tem atenção ao texto que escreveres no atributo title que deve ser breve e relevante para fornecer informações contextuais ou esclarecer a finalidade do link para ajudar o leitor a decidir se vale a pena clicar e visitar o local a que se destina.

Vamos a um exemplo prático:

DEMONSTRAÇÃO:

HTML CSS

          
<a href="#top" title="Se clicares aqui, vais ter ao cimo da página">
Uma ligação a visitar? 
</a>

<div title="Sou só uma div a dar de ares porque tenho um title">
  Não tenho ligações nobres, mas tenho <i>title</i>
</div>
 

a {
	display: block;
    width: 90%;
	margin: 15px auto;
	font-family: 'Philosopher', sans-serif;
	color: #fc4;
	text-shadow: -1px -1px 0 rgba(69, 36, 3, .5), 1px -1px 0 rgba(69, 36, 3, .5), -1px 1px 0 rgba(69, 36, 3, .5), 1px 1px 0 rgba(69, 36, 3, .5);
    filter: blur(.5px) opacity(0.85);
}
a:hover {
  filter: blur(0) opacity(1);
}
div {
	width: 90%;
	border: 6px double #038;
	display: block;
	background: #48d;
	margin: 15px auto;
	text-align: center;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
 

Resultado

Uma ligação a visitar?

Não tenho ligações nobres, mas tenho title

Pessoalmente, deixei de utilizar atributo title porque não há uma maneira de lhe dar estilos no CSS sem recorrer ao javascript.
Sem contar que a utilização do atributo title é altamente problemática para:

• Pessoas que utilizam dispositivos apenas touchscreen.
• Pessoas que navegam somente com teclados.
• As pessoas que navegam com tecnologia de apoio, como leitores de ecrã ou lupas.
• Pessoas com dificuldades de coordenação motora.
• Pessoas com problemas cognitivos.

Por essas e por outras é que se quiseres colocar um efeito tooltip E COM melhores possibilidades de personalização, é melhor utilizar uma técnica mais acessível e amiga dos métodos de navegação acima.
Pessoalmente, prefiro utilizar o atributo data, o mesmo que já utilizo há algum tempo nas ligações deste blogue.
Podem ver alguns exemplos práticos passando o rato por cima de alguns links neste artigo.

Era minha intenção escrever algo simples e rápido, mas desta vez a coisa foi-se expandindo quase por conta própria e por agora fico por aqui.
Voltarei a este assunto em breve para atar alguns fios soltos que na verdade eram sobre o que eu pretendia escrever ao inicio... =D
Como sempre, caso tenhas alguma questão sobre o assunto do artigo, podes deixar a tua(s) dúvida(s) nos comentários.

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?