A tag a e o atributo href: criando links

Se existe uma invenção que define a web, ela se chama link — a possibilidade de conectar um documento a outro com um simples clique. É exatamente isso que a tag <a> faz, e é por isso que ela é uma das mais fundamentais e poderosas de todo o HTML.

O a vem de anchor — âncora em inglês. Uma âncora fixa um ponto de conexão entre dois destinos, e é exatamente isso que um link faz: ancora sua página a outro lugar na web.

Anatomia básica de um link

<a href="https://www.google.com">Ir para o Google</a>

Um link tem três partes essenciais:

<a href="https://www.google.com">Ir para o Google</a>
 ↑  ↑___________________________↑↑_______________↑  ↑
tag  atributo href com o destino  texto clicável  fechamento

• <a> → a tag que cria o link
• href → o atributo que define o destino (hypertext reference — referência de hipertexto)
• Texto entre as tags → o conteúdo clicável visível para o usuário
• </a> → fechamento da tag

Por padrão, o navegador renderiza links com:

• Texto azul e sublinhado quando não visitado
• Texto roxo e sublinhado quando já visitado
• Texto vermelho ao clicar (estado ativo)

Esses estilos podem — e geralmente são — substituídos com CSS.

Os tipos de href: para onde um link pode apontar

O atributo href é extremamente versátil. Ele pode receber diferentes tipos de valores dependendo do destino desejado.

1. URLs absolutas: links para outros sites

Uma URL absoluta contém o endereço completo do destino, incluindo o protocolo (https://):

<!-- ✅ Link para um site externo -->
<a href="https://www.mozilla.org">Visite a Mozilla</a>

<!-- ✅ Link para uma página específica de outro site -->
<a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">
  Documentação HTML no MDN
</a>

💡 Sempre use https:// — nunca omita o protocolo em URLs absolutas. Sem ele, o navegador vai tentar interpretar o endereço como um caminho relativo dentro do seu próprio site.

2. URLs relativas: links dentro do mesmo projeto

Uma URL relativa aponta para um arquivo dentro do mesmo projeto, sem precisar do endereço completo. O caminho é calculado a partir da localização do arquivo atual:

meu-projeto/
├── index.html
├── sobre.html
├── contato.html
└── paginas/
    └── servicos.html

<!-- Estando em index.html: -->

<!-- ✅ Link para sobre.html (mesmo nível) -->
<a href="sobre.html">Sobre nós</a>

<!-- ✅ Link para contato.html (mesmo nível) -->
<a href="contato.html">Contato</a>

<!-- ✅ Link para servicos.html (dentro de subpasta) -->
<a href="paginas/servicos.html">Nossos serviços</a>

A partir de um arquivo em um subdiretório, como paginas/servicos.html:

<!-- Estando em paginas/servicos.html: -->

<!-- ✅ Subindo um nível com ../ para chegar ao index -->
<a href="../index.html">Voltar para a página inicial</a>

<!-- ✅ Subindo e entrando em outra pasta -->
<a href="../contato.html">Contato</a>

O ../ significa "suba um nível na estrutura de pastas". Pense nisso como navegar entre pastas no explorador de arquivos do seu computador.

3. Âncoras: links para seções da mesma página

Links de âncora usam o caractere # seguido do valor do atributo id de um elemento da página. Eles levam o usuário diretamente para aquela seção:

<!-- O link que aponta para a seção -->
<a href="#sobre">Ir para Sobre</a>
<a href="#contato">Ir para Contato</a>

<!-- Os destinos com id correspondente -->
<h2 id="sobre">Sobre nós</h2>
<p>Somos uma empresa...</p>

<h2 id="contato">Contato</h2>
<p>Fale conosco em...</p>

Âncoras são muito usadas em:

• Menus de navegação de página única
• Sumários de artigos longos
• Botões "Voltar ao topo"

<!-- Botão "Voltar ao topo" usando âncora -->
<a href="#topo">↑ Voltar ao topo</a>

4. Links de e-mail: mailto

O protocolo mailto: abre o cliente de e-mail padrão do usuário com o destinatário já preenchido:

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

Você pode pré-preencher o assunto e o corpo do e-mail:

<a href="mailto:contato@meusite.com?subject=Dúvida sobre o produto&body=Olá, gostaria de saber mais sobre...">
  Enviar e-mail com assunto pré-definido
</a>

5. Links de telefone: tel

O protocolo tel: inicia uma chamada em dispositivos móveis ou abre o discador no desktop:

<a href="tel:+5511999998888">Ligar agora: (11) 99999-8888</a>

O número deve seguir o formato internacional com o código do país (+55 para o Brasil).

6. Link para a página inicial com barra

Uma barra simples / aponta para a raiz do site:

<!-- Aponta para a página inicial do site -->
<a href="/">Início</a>

O atributo target: onde abrir o link

Por padrão, links abrem na mesma aba do navegador. O atributo target controla esse comportamento:

<!-- Abre na mesma aba (padrão) -->
<a href="https://exemplo.com" target="_self">Mesma aba</a>

<!-- Abre em uma nova aba -->
<a href="https://exemplo.com" target="_blank">Nova aba</a>

O valor _blank é o mais usado no dia a dia — especialmente para links externos, onde faz sentido não tirar o usuário da sua página.

Segurança com target="_blank"

Ao usar target="_blank", adicione também o atributo rel="noopener noreferrer" por razões de segurança:

<a
  href="https://site-externo.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Abrir site externo
</a>

• noopener → impede que a nova aba tenha acesso à página original via JavaScript
• noreferrer → impede que o site de destino saiba de qual página o usuário veio

O atributo download: forçar download de arquivo

O atributo download instrui o navegador a baixar o arquivo em vez de abri-lo:

<!-- Baixa o PDF em vez de abri-lo no navegador -->
<a href="catalogo.pdf" download>Baixar catálogo</a>

<!-- Define o nome do arquivo baixado -->
<a href="catalogo-2026.pdf" download="catalogo-produtos.pdf">
  Baixar catálogo
</a>

O conteúdo de um link não precisa ser só texto

A tag <a> pode envolver qualquer conteúdo inline — inclusive imagens, ícones e textos formatados:

<!-- Link com imagem clicável -->
<a href="https://exemplo.com">
  <img src="logo.png" alt="Logo da Empresa">
</a>

<!-- Link com ícone e texto -->
<a href="mailto:contato@email.com">
  📧 Enviar e-mail
</a>

<!-- Link com texto formatado -->
<a href="/promocoes">
  Veja nossas <strong>promoções exclusivas</strong>
</a>

Links acessíveis: boas práticas

✅ Textos descritivos

O texto do link deve descrever claramente o destino — leitores de tela anunciam o texto do link para o usuário:

<!-- ❌ Ruim — texto genérico sem contexto -->
<a href="/relatorio.pdf">Clique aqui</a>

<!-- ✅ Bom — texto descritivo do destino -->
<a href="/relatorio.pdf">Baixar relatório anual 2026 (PDF)</a>

✅ Indicar links externos e downloads

Ajude o usuário a saber o que esperar ao clicar:

<!-- Indicando link externo -->
<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">
  Documentação oficial (abre em nova aba)
</a>

<!-- Indicando download -->
<a href="guia.pdf" download>
  Baixar guia completo (PDF, 2,3 MB)
</a>

✅ Nunca use href vazio ou "#" como destino real

<!-- ❌ Evite — leva ao topo da página sem intenção -->
<a href="#">Ver mais</a>

<!-- ✅ Se o link ainda não tem destino, use um comentário -->
<!-- <a href="pagina-em-construcao.html">Ver mais</a> -->

Resumindo