Imagem Destaque
Criado em

Links e Navegação no HTML

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:

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:

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:

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

Exemplos:

<a href="/servicos">Ver serviços</a>

Exemplo de botão

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

Regra prática?

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:

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:

Benefícios?

Eles ajudam:

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:

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:

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:

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:

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:

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:

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?

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:

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?

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?

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?

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 podem carregar parâmetros na URL.

Exemplo

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

Quando isso é útil?

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:

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:

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:

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?

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?

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 é?

O atributo mais importante é?

Atributos úteis?

Tipos de destino mais comuns?

Regra mais importante?

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

Antes de publicar, vale conferir?

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:

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: