EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Links HTML

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.

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

Exemplo

HTML 
<a href="https://web-tutorial.com/">Visite o Site de Exemplo</a>
▶ 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.

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

HTML 
<a href="https://web-tutorial.com/" target="_blank">Abrir em Nova Aba</a>

<a href="/html/index.html" target="_self">Abrir na Página Atual (Padrão)</a>
▶ Experimente

Valores comuns de target:

⚠️ 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>.

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:

Exemplo

HTML 
<!-- Caminho absoluto: URL completa -->
<a href="https://www.google.com">Visitar o Google</a>

<!-- Caminho relativo: relativo ao arquivo atual -->
<a href="basics.html">Noções Básicas de HTML</a>

<!-- Caminho relativo: diretório pai -->
<a href="../index.html">Voltar ao Início</a>
▶ Experimente

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

HTML 
<!-- Sumário -->
<a href="#section-intro">Ir para a Introdução</a>
<a href="#section-detalhes">Ir para os Detalhes</a>

<!-- Seções de destino -->
<h2 id="section-intro">Introdução</h2>
<p style="min-height:600px;background:#f0f0f0;">Conteúdo da introdução aqui...</p>

<h2 id="section-detalhes">Detalhes</h2>
<p style="min-height:600px;background:#f0f0f0;">Informações detalhadas aqui...</p>
▶ 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.

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

HTML 
<!-- Link de imagem -->
<a href="https://www.exemplo.com">
<img src="/assets/images/tutorials/html-banner-example.webp" alt="Clique para ver detalhes">
</a>

<!-- Link de download -->
<a href="documento.pdf" download>Baixar Documento PDF</a>

<!-- Link de e-mail -->
<a href="mailto:suporte@exemplo.com">Envie-nos um E-mail</a>
▶ Experimente
📌 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.

❓ 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

📝 Atividades

  1. 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".
  2. 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).
  3. 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?
100%