Como ancorar elementos com HTML5

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: 

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. 

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! 

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. 

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`: 

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: 

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! ✨