HTML: Links HTML

Última atualização: 2026-10-13

Links (hiperlinks) são os fios que conectam as páginas web — sem links, a Internet não seria uma "teia". Com a tag <a>, você pode navegar entre páginas, pular para seções específicas dentro de uma página, baixar arquivos ou enviar e-mails.

Tags nesta seção: <a> <img> <body>

1. Sintaxe Básica de Links

Um link é definido pela tag <a> (anchor), onde o atributo href (hypertext reference) especifica o endereço de destino:

▶ Exemplo

▶ Experimente

O código acima é renderizado no navegador como o texto clicável "Visite o Site de Exemplo", estilizado por padrão em texto azul com sublinhado. Ao clicar, o navegador navega para a URL especificada em href.

💡 Dica: O texto do link deve dizer claramente ao usuário o que esperar ao clicar. Por exemplo, "Clique aqui" é menos útil do que "Ver o guia completo do usuário" — é mais fácil para o usuário decidir e também é melhor para os mecanismos de busca.

2. Comportamento de Abertura: o Atributo target

Por padrão, os links abrem na página atual (substituindo-a). Use o atributo target para abrir em uma nova aba ou janela:

▶ Exemplo

▶ Experimente

Valores comuns de target:

_self: Padrão — abre na página atual
_blank: Abre em uma nova aba ou janela
_parent: Abre no frame pai (usado em cenários com iframe)
_top: Abre na janela completa (sai de todos os frames)

⚠️ Nota de Segurança: Ao usar target="_blank", é recomendado adicionar rel="noopener" ou rel="noreferrer" ao link. Isso impede que a nova página acesse o objeto da página original via window.opener, evitando riscos de segurança potenciais: <a href="..." target="_blank" rel="noopener">Link</a>.

3. Caminhos Absolutos vs. Relativos

Os destinos dos links podem ser caminhos absolutos ou relativos. A diferença é simples — caminhos absolutos incluem a URL completa, enquanto caminhos relativos especificam um local em relação à página atual:

Caminho absoluto: Começa com um protocolo (https://), aponta para uma URL externa ou interna completa
Caminho relativo: Começa com um nome de arquivo ou ./, ../, aponta para um local relativo ao arquivo atual
Caminho raiz: Começa com /, localiza a partir do diretório raiz do site, ex.: /html/index.html

▶ Exemplo

▶ Experimente

4. Links Âncora: Navegar Dentro da Página

Os links âncora permitem pular diretamente para uma seção específica na mesma página — perfeitos para páginas longas com navegação "Voltar ao Topo" ou sumário. São apenas dois passos: atribua um id ao elemento de destino e, em seguida, crie o link com #id.

▶ Exemplo

▶ Experimente

As âncoras também suportam saltos entre páginas — basta especificar tanto a página quanto a âncora no link, por exemplo: <a href="basics.html#section-head">Ver a Estrutura de Cabeçalho</a>. O navegador abrirá essa página e rolará automaticamente até a posição especificada.

5. Links de Imagem e Outros Usos

Os links não se limitam a texto — coloque uma tag <img> dentro de uma tag <a> e a imagem se torna clicável. A tag <a> também pode ser usada para baixar arquivos e enviar e-mails:

▶ Exemplo

▶ Experimente

Links de imagem: Clique na imagem para navegar; o texto alt é fundamental para acessibilidade
Links de download: Adicionar o atributo download faz o navegador baixar o arquivo em vez de abri-lo
Links de e-mail: Usar o protocolo mailto: abre o cliente de e-mail padrão do sistema

📌 Nota: A tag <a> também possui o atributo title, muito usado, que exibe um texto de dica ao passar o mouse: <a href="..." title="Clique para ver o tutorial completo">Tutorial de HTML</a>. Essa dica também é amigável para tecnologias assistivas como leitores de tela.

Tags nesta seção: <a> <img> <body>

❓ Perguntas Frequentes

P Por que devo adicionar rel="noopener" ao usar target="_blank"?

R Isso é uma medida de segurança. Quando um link abre em uma nova aba com target="_blank", a nova página pode acessar o objeto window da página original via window.opener, permitindo que páginas maliciosas adulterem seu conteúdo ou realizem ataques de phishing. Adicionar rel="noopener" corta esse acesso, protegendo sua página. Adicione rel="noopener" ou rel="noreferrer" a todos os links target="_blank".

P Qual é a diferença entre caminhos absolutos e relativos? Quando uso cada um?

R Caminhos absolutos contêm URLs completas (como https://exemplo.com/pagina.html) e apontam para recursos externos ou quando precisa de especificação explícita de domínio. Caminhos relativos usam posições relativas ao arquivo atual (como ./sobre.html ou ../index.html) para navegação no mesmo site. Caminhos raiz (como /html/index.html) começam do diretório raiz do site, ideal para sites grandes. Regra básica：caminhos relativos para links internos, caminhos absolutos para links externos.

P Meu link âncora não está funcionando. O que devo verificar?

R Causas comuns：1）O elemento alvo não tem atributo id; 2）O valor do id está com erro de digitação (diferencia maiúsculas de minúsculas); 3）O id não é único na página (navegador pula para o primeiro correspondente); 4）O elemento alvo está oculto com display:none. Método de depuração：No console do navegador, digite document.getElementById("seuId") — se retornar null, o id não existe.

📖 Resumo

Links usam a tag <a>; o atributo href especifica o destino
target="_blank" abre em uma nova aba — recomendado usar junto com rel="noopener"
Caminhos absolutos são URLs completas; caminhos relativos são baseados no local do arquivo atual
Links âncora usam #id para saltar dentro da página e também funcionam entre páginas
Aninhar <img> dentro de <a> cria links de imagem; download aciona um download; mailto: envia e-mail

📝 Exercícios

Crie um link: Escreva um link para https://www.google.com que abra em uma nova aba, com o texto do link "Pesquisar no Google".
Navegação âncora: Crie um link "Voltar ao Topo" no final de uma página que aponte para o topo (dica: adicione um id na tag <body> ou use # com um elemento no topo).
Autoavaliação: Olhe o código-fonte de uma página que você escreveu, encontre todas as tags <a> e examine como seus atributos href e target estão configurados — consegue dizer onde cada link vai abrir?

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós