Como ancorar elementos com HTML5

Muitas páginas na web, como artigos técnicos e tutoriais, possuem muito conteúdo, o que pode tornar a navegação difícil. Utilizar âncoras em HTML (tag ancora html, link ancora, ancoragem html) é uma ótima solução para facilitar a navegação entre tópicos em páginas longas. 

Por exemplo, imagine um artigo sobre otimização de sites, com diversos tópicos que deixam a navegação longa. 

Mas, e se eu quisesse ler apenas um tópico específico deste texto? Teria que scrollar por um longo tempo, tentando encontrar o trecho que me interessa... 

Uma solução para facilitar a navegação é criar um índice, semelhante ao sumário de um livro, orientando sobre os tópicos presentes ao longo da página.. 

Como criar uma lista de elementos HTML com âncoras internas 

Para facilitar a navegação em páginas extensas, podemos criar uma lista de elementos HTML usando links âncora. Veja como preparar um sumário com ancoragem HTML que direciona o leitor para as seções desejadas:: HTML  

<li>#1 – Habilite GZIP</li> 
<li>#2 – Minifique JavaScript</li> 
<li>#3 – Minifique CSS</li> 
<li>#4 – Comprima o HTML</li>

Isto resultaria em uma lista de tópicos, que poderíamos adicionar logo após a introdução do texto: 

Mas apenas essa lista não resolve completamente o problema: a pessoa leitora ainda precisaria rolar bastante até encontrar o tópico desejado... 

E se fosse possível ir diretamente da lista de tópicos ao conteúdo correspondente, sem rolar a página manualmente? Isso otimizaria a navegação e pouparia tempo. 

Esse objetivo pode ser atingido conectando os itens da lista aos respectivos tópicos do texto usando HTML, de forma simples. 

Como fazer ancoragem HTML (ancora em HTML): passo a passo

O que é link âncora HTML? 

A tag ancora HTML é usada para criar links internos em uma página, permitindo a criação de navegação rápida para seções específicas. Veja como configurar: 

Por exemplo, se pegarmos o primeiro tópico do texto: 

HTML  
<h3>#1 - Habilite GZIP</h3>

Há muito tempo que falo que habilitar o GZIP no servidor é o primeiro passo. Não leva mais de 30s para ser feito e é suportado em todos os navegadores... 

Vamos então determinar uma identificação (`id`) para este elemento. 

HTML  
<h3 id="habilite-gzip">#1 - Habilite GZIP</h3>

Neste caso foi adicionado o `id` como referência `habilite-gzip`, por exemplo. Cada caso irá pedir uma especificidade diferente. 

Ok, definido isso, precisamos agora criar um link ainda usando a tag ancora HTML (<a>) no índice, apontando para a identificação da seção desejada. 

Nos itens do índice adicionamos exatamente isso: links! 

HTML  
<li><a href="#">#1 - Habilite GZIP</a></li>

Observe que, inicialmente, não temos um destino para o atributo 'href'. Mas o que devemos colocar nesse atributo? 

O valor do 'id' definido na tag do tópico é exatamente o que deve ser referenciado no 'href' do link. 

HTML  
<li><a href="#habilite-gzip">#1 - Habilite GZIP</a></li>

Assim, ao colocar um "#" antes do valor do 'id' no atributo 'href', dizemos ao navegador para ir direto até o elemento desejado. O link passa a agir como uma âncora interna, facilitando a navegação. 

Ao final, o índice ficará mais ou menos assim: 

Agora sim, conseguimos ancorar um link com um outro ponto dentro da mesma página. :) 

Melhorando a experiência com scroll suave 

Para tornar a navegação ainda mais agradável, é possível adicionar um comportamento de rolagem suave (smooth scroll) usando CSS. Basta adicionar a seguinte propriedade ao elemento `html` ou `body`: 

```css 
html { 
scroll-behavior: smooth; 
} 
```

Com essa única linha de CSS, quando o usuário clicar em um link âncora, a página irá rolar suavemente até o destino, ao invés de pular instantaneamente. Essa propriedade tem suporte superior a 95% nos navegadores modernos em 2026. 

Importante para acessibilidade: Alguns usuários podem sentir desconforto com animações de movimento. Para respeitar as preferências de acessibilidade, adicione: 

```css 
@media (prefers-reduced-motion: reduce) { 
html { 
scroll-behavior: auto; 
} 
} 
```

Isso desativa a rolagem suave para usuários que configuraram suas preferências do sistema para reduzir movimento. 

Exemplos e outros usos de âncoras HTML 

Além desse índice de tópicos, encontramos por aí outras formas de utilizar a ancoragem, como em botões "Voltar para o topo". Algo como: 

Nesses casos, a âncora permite retornar ao início da página de forma rápida. 

Vale destacar que o uso de âncoras é especialmente útil em páginas longas. Quando a rolagem é extensa, é mais fácil que a pessoa visitante se perca, prejudicando a usabilidade. 

Por que usar âncoras HTML melhora a usabilidade de sites? 

Se considerarmos que hoje os usuários são leitores com pouco engajamento na leitura de textos completos, considerar a ancoragem de elementos dentro da própria página é algo muito interessante para conseguirmos uma melhor navegabilidade. 

Dessa forma, facilitamos o acesso às informações relevantes e aumentamos as chances de manter o interesse da pessoa visitante durante a navegação. 

Mesmo sendo um recurso interessante, é fundamental avaliar o contexto e aplicar âncoras apenas quando realmente necessário.

Como aprender mais sobre HTML?

Para deixar suas páginas ainda mais completas, aprenda as diferentes especificidades que podemos encontrar em HTML, suas vantagens e desvantagens e muitas outras coisas legais na Formação FrontEnd da Alura! 

Avalie este artigo 

✨ Agradecemos pela sua avaliação! ✨