Links e navegação no HTML
Criado em
Por Gabriel Soares

Links e navegação no HTML

HTMLBoas Práticas

A navegação é uma das partes mais importantes de qualquer interface.

Neste post, você vai entender como usar a tag <a> corretamente, quando criar links, como organizar a navegação e quais cuidados tomar com acessibilidade, SEO e experiência do usuário.

Links são conexões entre destinos.

No HTML, o principal elemento responsável por isso é a tag <a>, também chamada de âncora.

Com ela, você pode criar links para:

  • outras páginas do site
  • páginas externas
  • seções da mesma página
  • e-mails
  • telefones
  • arquivos
  • downloads
  • áreas específicas de navegação
  • rotas internas de aplicações

Sem links, a web deixa de ser web.

A navegação entre documentos é uma das bases da própria internet.

O que é a tag <a>?

A tag <a> cria um hiperlink.

O destino normalmente é definido com o atributo href.

Exemplo básico

<a href="/contato">Falar com a equipe</a>

Nesse caso:

  • <a> é a tag de link
  • href define o destino
  • o texto entre abertura e fechamento é a área clicável

Por que a tag <a> é tão importante?

A tag <a> influencia diretamente:

Ela conecta páginas, seções e fluxos.

Usabilidade

Ajuda o usuário a entender para onde pode ir em seguida.

SEO

Mecanismos de busca usam links para descobrir, relacionar e interpretar páginas.

Acessibilidade

Leitores de tela dependem de links bem escritos para orientar a navegação.

Arquitetura da informação

Uma boa malha de links melhora a organização do conteúdo.

Essa é uma das dúvidas mais importantes do HTML.

Use <a> quando o usuário vai para outro destino?

Exemplos:

  • abrir outra página
  • ir para uma seção
  • acessar um arquivo
  • abrir um e-mail
  • iniciar ligação
  • navegar para outra rota

Use <button> quando a ação acontece na própria interface?

Exemplos:

  • abrir modal
  • enviar formulário
  • alternar menu
  • expandir accordion
  • executar JavaScript
  • confirmar ação
<a href="/servicos">Ver serviços</a>

Exemplo de botão

<button type="button">Abrir menu</button>

Regra prática?

  • navegação = <a>
  • ação = <button>

Essa distinção melhora semântica, acessibilidade e previsibilidade.

O que faz o atributo href?

O atributo href define o destino do link.

Sem ele, a tag <a> perde sua função principal de navegação.

Exemplo

<a href="/blog">Ir para o blog</a>

O que pode existir dentro de href?

Você pode usar:

  • caminhos internos
  • URLs absolutas
  • âncoras
  • protocolos como mailto: e tel:
  • arquivos
  • parâmetros de busca
  • hashes

Links internos apontam para páginas do mesmo site ou da mesma aplicação.

Exemplo

<a href="/sobre">Sobre a empresa</a>

Quando usar?

Use links internos para:

  • menu principal
  • blog
  • páginas institucionais
  • produtos
  • categorias
  • páginas legais
  • fluxos de navegação do próprio projeto

Benefícios?

Eles ajudam:

  • o usuário a continuar navegando
  • a distribuir relevância entre páginas
  • a melhorar a descoberta de conteúdo
  • a reforçar a arquitetura do site

Links externos apontam para outro domínio.

Exemplo

<a href="https://www.exemplo.com">Visitar site parceiro</a>

Quando faz sentido?

Use quando quiser levar o usuário a:

  • referências externas
  • materiais complementares
  • parceiros
  • documentações
  • plataformas terceiras
  • páginas oficiais fora do seu domínio

Quando usar target="_blank"?

O atributo target="_blank" faz o link abrir em nova aba ou nova janela, dependendo do navegador e contexto.

Exemplo

<a href="https://www.exemplo.com" target="_blank">Abrir site externo</a>

Quando isso pode ser útil?

Casos comuns:

  • documentação externa
  • sistemas terceiros
  • páginas complementares fora do fluxo principal
  • referências que você não quer substituir na aba atual

Não.

Abrir em nova aba é uma decisão de experiência. Nem todo link externo precisa disso.

Por que usar rel="noopener noreferrer" com target="_blank"?

Quando você usa target="_blank", é boa prática combinar com rel="noopener noreferrer".

Exemplo

<a href="https://www.exemplo.com" target="_blank" rel="noopener noreferrer">
  Abrir referência externa
</a>

Por que isso importa?

noopener

Evita que a nova aba tenha acesso indevido ao contexto da janela original.

noreferrer

Impede o envio de algumas informações de referência para o destino, dependendo do caso.

Regra prática?

Se usar target="_blank", normalmente combine com:

rel="noopener noreferrer"

Você pode criar links internos com hash para navegar até uma área específica do documento.

<a href="#faq">Ir para o FAQ</a>

Exemplo do destino

<section id="faq">
  <h2>Perguntas frequentes</h2>
</section>

Como isso funciona?

O href="#faq" aponta para o elemento que possui id="faq".

Quando usar?

É muito útil em:

  • landing pages
  • páginas longas
  • menus one page
  • índices internos
  • páginas com sumário
  • FAQs extensos

Você pode usar o protocolo mailto:.

Exemplo

<a href="mailto:contato@exemplo.com">Enviar e-mail</a>

Quando usar?

Use quando quiser abrir o cliente de e-mail do dispositivo do usuário.

Exemplo com assunto pré-preenchido

<a href="mailto:contato@exemplo.com?subject=Quero%20saber%20mais">
  Falar por e-mail
</a>

O que observar?

Nem todos os usuários usam cliente de e-mail configurado. Por isso, em muitos projetos, formulários continuam sendo necessários.

Você pode usar o protocolo tel:.

Exemplo

<a href="tel:+5531999999999">Ligar agora</a>

Quando usar?

Especialmente útil em:

  • mobile
  • páginas de contato
  • landing pages
  • sites de serviço local
  • rodapés
  • CTAs de atendimento rápido

Boa prática?

Use o número em formato internacional sempre que possível no href.

Exemplo com texto amigável

<a href="tel:+5531999999999">(31) 99999-9999</a>

Embora seja um link para serviço externo, esse uso é muito comum em projetos comerciais.

Exemplo

<a href="https://wa.me/5531999999999"> Falar no WhatsApp </a>

Exemplo com mensagem pré-preenchida

<a href="https://wa.me/5531999999999?text=Olá%20quero%20mais%20informações">
  Chamar no WhatsApp
</a>

Quando usar?

Muito comum em:

  • landing pages
  • páginas de contato
  • páginas comerciais
  • serviços locais
  • suporte rápido
  • e-commerce

Observação?

Apesar de ser um caso comum, tecnicamente continua sendo um link de navegação.

Você pode apontar para um arquivo e, se fizer sentido, usar o atributo download.

Exemplo simples

<a href="/arquivos/guia.pdf">Baixar guia</a>

Exemplo com download

<a href="/arquivos/guia.pdf" download> Baixar PDF </a>

O que o atributo download faz?

Ele sugere ao navegador que o recurso seja baixado em vez de simplesmente aberto.

Quando usar?

Use quando o objetivo principal for entregar um arquivo ao usuário.

Casos comuns:

  • PDFs
  • materiais ricos
  • planilhas
  • apresentações
  • imagens
  • documentos técnicos

O texto do link é extremamente importante.

Exemplo ruim

<a href="/servicos">Clique aqui</a>

Por que isso é ruim?

Porque o texto não informa o destino nem a intenção.

Exemplo melhor

<a href="/servicos">Conheça nossos serviços</a>

Melhor para quem?

  • usuários em geral
  • leitores de tela
  • navegação por contexto
  • SEO semântico

Regra prática?

O texto do link deve fazer sentido mesmo fora da frase.

Menus são um dos contextos mais comuns para links.

Exemplo

<nav aria-label="Navegação principal">
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/sobre">Sobre</a></li>
    <li><a href="/servicos">Serviços</a></li>
    <li><a href="/contato">Contato</a></li>
  </ul>
</nav>

Por que isso é bom?

Porque une:

  • semântica com nav
  • organização com lista
  • clareza de navegação com links descritivos

Regra prática?

Em menus principais, é comum que links estejam dentro de listas. Isso costuma trazer uma estrutura mais organizada e previsível.

Como marcar a página atual em menus?

Uma boa prática de acessibilidade é indicar qual item representa a página atual.

Exemplo

<nav aria-label="Navegação principal">
  <a href="/" aria-current="page">Início</a>
  <a href="/blog">Blog</a>
  <a href="/contato">Contato</a>
</nav>

O que aria-current="page" faz?

Ele informa às tecnologias assistivas que aquele link representa a página atual.

Onde isso é útil?

  • menu principal
  • navegação lateral
  • breadcrumbs
  • paginação
  • abas de navegação

Breadcrumbs ajudam o usuário a entender sua posição dentro da estrutura do site.

Exemplo

<nav aria-label="Breadcrumb">
  <a href="/">Início</a>
  <span> / </span>
  <a href="/blog">Blog</a>
  <span> / </span>
  <span aria-current="page">Links e Navegação no HTML</span>
</nav>

Observação?

O último item pode deixar de ser link quando representa a página atual.

Benefícios?

  • melhora orientação
  • reforça arquitetura da informação
  • ajuda navegação contextual
  • pode contribuir indiretamente para SEO e UX

Em interfaces modernas, cards muitas vezes levam a outro conteúdo.

<article>
  <h2>Post sobre HTML semântico</h2>
  <p>Aprenda a estruturar páginas com mais clareza.</p>
  <a href="/blog/html-semantico">Ler artigo</a>
</article>

Exemplo com título linkado

<article>
  <h2>
    <a href="/blog/html-semantico">Post sobre HTML semântico</a>
  </h2>
  <p>Aprenda a estruturar páginas com mais clareza.</p>
</article>

Qual abordagem costuma ser melhor?

Geralmente, linkar o título e oferecer um CTA claro funciona bem. Isso evita áreas clicáveis confusas e melhora previsibilidade.

Você pode tornar uma imagem clicável colocando a imagem dentro do link.

Exemplo

<a href="/produto/cadeira-premium">
  <img src="/images/cadeira.jpg" alt="Cadeira premium em madeira"/>
</a>

Quando usar?

  • cards de produto
  • logos clicáveis
  • banners
  • thumbnails
  • galerias

Atenção?

Se a imagem for o único conteúdo do link, o alt precisa cumprir bem o papel descritivo.

É muito comum fazer a logo levar para a home.

Exemplo

<a href="/" class="logo">
  <img src="/images/logo.svg" alt="Nome da marca"/>
</a>

Por que isso é útil?

Porque é um padrão amplamente reconhecido na web.

Regra prática?

Se a logo for clicável, o usuário espera que ela leve para a página inicial.

Além de downloads, links também podem abrir arquivos diretamente.

Exemplo

<a href="/docs/manual.pdf">Abrir manual em PDF</a>

Quando isso faz sentido?

Quando o arquivo deve ser acessado como conteúdo, não necessariamente baixado automaticamente.

Aponta para um caminho dentro do contexto do site.

<a href="/blog">Blog</a>

Inclui a URL completa.

<a href="https://www.exemplo.com/blog">Blog</a>

Quando usar cada um?

Relativos

Mais comuns em navegação interna.

Absolutos

Úteis em:

  • links externos
  • canonical
  • Open Graph
  • alguns contextos de compartilhamento
  • integrações específicas

Links podem carregar parâmetros na URL.

Exemplo

<a href="/busca?q=html">Buscar por HTML</a>

Quando isso é útil?

  • filtros
  • busca
  • rastreamento
  • campanhas
  • estados de navegação
  • páginas dinâmicas

Você também pode criar links de “pular para conteúdo”.

Exemplo

<a href="#conteudo-principal" class="skip-link"> Pular para o conteúdo </a>

<main id="conteudo-principal">
  <h1>Título principal</h1>
</main>

Por que isso é importante?

Esse padrão ajuda especialmente:

  • usuários de teclado
  • leitores de tela
  • navegação rápida em páginas com muitos elementos recorrentes

O texto do link precisa ser claro, objetivo e informativo.

Bons exemplos

<a href="/contato">Fale com a equipe</a>
<a href="/servicos">Conheça os serviços</a>
<a href="/blog/html-semantico">Leia o artigo sobre HTML semântico</a>

Exemplos fracos

<a href="/contato">Clique aqui</a>
<a href="/servicos">Saiba mais</a>
<a href="/blog/html-semantico">Leia mais</a>

Por que evitar textos vagos?

Porque eles não explicam:

  • para onde o link leva
  • o que o usuário vai encontrar
  • qual é a utilidade daquele clique

Regra prática?

O texto do link deve funcionar com clareza mesmo isolado da frase ao redor.

Existem várias boas práticas simples.

1. Use textos descritivos?

O usuário deve entender o destino do link.

2. Não dependa só da cor?

Links precisam ter contraste e, em muitos casos, outro sinal visual além da cor.

3. Garanta foco visível?

Usuários de teclado precisam enxergar qual link está focado.

4. Não remova o sublinhado sem critério?

Especialmente em conteúdos textuais, o sublinhado ajuda a reconhecer links.

5. Avise quando abrir nova aba?

Quando fizer sentido, informe o usuário.

Exemplo

<a
  href="https://www.exemplo.com"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Abrir documentação externa em nova aba"
>
  Documentação externa
</a>

6. Use aria-current quando necessário?

Ajuda a indicar a página atual.

Links ajudam mecanismos de busca a:

  • descobrir páginas
  • entender relações entre conteúdos
  • interpretar hierarquia de navegação
  • distribuir relevância interna
  • contextualizar temas relacionados
  • crawl
  • arquitetura do site
  • permanência do usuário
  • descoberta de conteúdo relacionado
  • contextualização
  • referência
  • credibilidade, quando fazem sentido editorialmente

O atributo rel define a relação entre a página atual e o recurso linkado.

Exemplo

<a href="https://www.exemplo.com" rel="noopener noreferrer"> Visitar site </a>

Valores comuns?

  • noopener
  • noreferrer
  • nofollow
  • sponsored
  • ugc

Quando usar nofollow?

nofollow informa que você não quer transferir endosso editorial padrão ao destino.

Exemplo

<a href="https://www.exemplo.com" rel="nofollow"> Link externo </a>

Quando pode fazer sentido?

  • links pagos
  • publicidade
  • conteúdos gerados por usuários
  • situações em que você não quer sinalizar endosso editorial padrão

Quando usar sponsored?

Indica links patrocinados ou publicitários.

Exemplo

<a href="https://www.exemplo.com" rel="sponsored"> Oferta patrocinada </a>

Quando usar ugc?

Indica conteúdo gerado por usuário.

Exemplo

<a href="https://www.exemplo.com" rel="ugc"> Link publicado em comentário </a>

Como estruturar uma navegação simples e correta?

Abaixo está um exemplo prático bem organizado.

<header>
  <a href="/" class="logo">
    <img src="/images/logo.svg" alt="Criativiarte"/>
  </a>

  <nav aria-label="Navegação principal">
    <ul>
      <li><a href="/" aria-current="page">Início</a></li>
      <li><a href="/sobre">Sobre</a></li>
      <li><a href="/servicos">Serviços</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contato">Contato</a></li>
    </ul>
  </nav>
</header>

Exemplo prático:

<section aria-labelledby="contato-titulo">
  <h2 id="contato-titulo">Contato</h2>

  <p>
    <a href="mailto:contato@criativiarte.com"> contato@criativiarte.com </a>
  </p>

  <p>
    <a href="tel:+5531999999999"> (31) 99999-9999 </a>
  </p>

  <p>
    <a href="https://wa.me/5531999999999?text=Olá%20quero%20mais%20informações">
      Falar no WhatsApp
    </a>
  </p>
</section>
<nav aria-label="Índice do conteúdo">
  <ul>
    <li><a href="#o-que-e">O que é a tag a?</a></li>
    <li><a href="#links-internos">Como criar links internos?</a></li>
    <li><a href="#links-externos">Como criar links externos?</a></li>
    <li>
      <a href="#acessibilidade">Como melhorar a acessibilidade dos links?</a>
    </li>
  </ul>
</nav>

<section id="o-que-e">
  <h2>O que é a tag a?</h2>
</section>

<section id="links-internos">
  <h2>Como criar links internos?</h2>
</section>

<section id="links-externos">
  <h2>Como criar links externos?</h2>
</section>

<section id="acessibilidade">
  <h2>Como melhorar a acessibilidade dos links?</h2>
</section>

Usar <a> sem href?

Sem href, o elemento perde sua função principal de link.

Isso prejudica semântica e comportamento esperado.

Escrever “clique aqui”?

O texto fica fraco para acessibilidade e clareza.

Abrir nova aba sem necessidade?

Pode interromper o fluxo do usuário.

Usar target="_blank" sem rel="noopener noreferrer"?

É uma prática incompleta.

O usuário não entende bem o destino.

Usuários de teclado ficam prejudicados.

Isso pode prejudicar percepção e acessibilidade.

Faça perguntas simples?

Vai levar o usuário para outro destino?

Use <a>.

Vai apenas disparar uma ação local?

Use <button>.

O destino é uma página, um arquivo, uma seção, um telefone ou e-mail?

Use <a>.

O usuário espera navegação?

Use <a>.

Subgrupo prático das principais variações da tag <a>

<a href="/blog">Blog</a>
<a href="https://www.exemplo.com">Site externo</a>
<a href="https://www.exemplo.com" target="_blank" rel="noopener noreferrer">
  Abrir site externo
</a>
<a href="#faq">Ir para o FAQ</a>
<a href="mailto:contato@exemplo.com">Enviar e-mail</a>
<a href="tel:+5531999999999">Ligar agora</a>
<a href="https://wa.me/5531999999999?text=Olá%20quero%20mais%20informações">
  Falar no WhatsApp
</a>
<a href="/arquivos/guia.pdf" download>Baixar guia</a>
<a href="/produto/cadeira-premium">
  <img src="/images/cadeira.jpg" alt="Cadeira premium"/>
</a>
<a href="/blog" aria-current="page">Blog</a>

A tag principal é?

  • <a>

O atributo mais importante é?

  • href

Atributos úteis?

  • target
  • rel
  • download
  • aria-current
  • aria-label, em casos específicos

Tipos de destino mais comuns?

  • páginas internas
  • páginas externas
  • âncoras
  • e-mail
  • telefone
  • WhatsApp
  • arquivos
  • downloads

Regra mais importante?

Se é navegação, use link. Se é ação, use botão.

Antes de publicar, vale conferir?

  • os links têm textos claros?
  • cada link aponta para o destino correto?
  • links externos em nova aba usam rel="noopener noreferrer"?
  • o menu principal está em nav?
  • a página atual usa aria-current, quando fizer sentido?
  • os links são reconhecíveis visualmente?
  • há foco visível para navegação por teclado?
  • links de contato usam mailto: e tel: corretamente?
  • links de download usam download quando necessário?
  • nenhum link está sendo usado no lugar de um botão?

Conclusão

A tag <a> parece simples, mas tem um papel enorme na qualidade de uma interface.

Quando você domina links e navegação, melhora:

  • a usabilidade
  • a acessibilidade
  • o SEO
  • a arquitetura do site
  • a clareza dos fluxos
  • a experiência geral do usuário

Links bem escritos e bem estruturados ajudam o usuário a entender o caminho disponível e tornam a navegação mais natural, previsível e eficiente.

Depois desse tema, o próximo passo natural costuma ser aprofundar em:

  • imagens e mídia
  • formulários
  • tabelas
  • interações
  • acessibilidade avançada com ARIA