Carregando...

Links HTML

A codificação URL explicou como caracteres especiais viajam dentro de um endereço. Esta sessão constrói a ferramenta HTML do dia a dia que usa esses endereços: o elemento anchor a com um href. Links são como os visitantes se movem entre suas páginas e para a web mais ampla. Destinos claros e texto clicável claro importam tanto quanto a marcação correta.

O que é um link

Um hiperlink é um controle que navega para algum lugar quando ativado. Em HTML, você envolve o conteúdo clicável — geralmente texto, às vezes uma imagem — em <a>...</a> e define href para o destino. Sem href, você não tem um link de navegação normal. O navegador estiliza links por padrão (muitas vezes sublinhados e coloridos), mas a parte importante é o destino e o texto.

Resposta direta

Escreva <a href="URL">texto clicável</a>. O href pode ser um endereço web completo como https://www.example.com (absoluto) ou um caminho para outro arquivo no seu site como about.html (relativo). Os visitantes clicam no conteúdo entre as tags. Prefira um texto que descreva o destino — “Sobre este site” — em vez de frases vazias como “clique aqui”.

Links absolutos

URLs absolutas incluem um esquema (https:// ou http://) e geralmente um host. Use-as para sites externos, ou sempre que você realmente precise de um endereço completo que não dependa da pasta atual.

Link absoluto

html
HTML Code 
<p>
<a href="https://www.example.com">Visit Example</a>
</p>

Lendo o exemplo absoluto

  • href guarda o destino completo começando com https://
  • As palavras Visit Example são o que o usuário vê e ativa
  • Erros de digitação no host ou no esquema quebram a viagem mesmo se as tags HTML forem válidas
  • Links absolutos ainda se beneficiam de texto honesto e descritivo

Links relativos no seu próprio site

URLs relativas apontam para arquivos em relação à localização da página atual. São o jeito cotidiano de conectar index.html a about.html sem repetir o nome do seu domínio. As habilidades de File Paths se aplicam: pastas erradas produzem falhas 404 silenciosas.

Link relativo para outra página

html
HTML Code 
<p>
<a href="about.html">About this site</a>
</p>

Hábitos relativos que ajudam

  • Mantenha páginas relacionadas em uma estrutura de pastas clara
  • Prefira nomes de arquivo com hífens, sem espaços
  • Teste as duas direções: início → sobre e sobre → início
  • Lembre-se de que mover um arquivo HTML sem atualizar links relativos quebra a navegação

O texto do link é conteúdo, não decoração

Usuários de leitores de tela muitas vezes saltam por uma lista de links sem ouvir o parágrafo ao redor. “Clique aqui” e “leia mais” repetidos dez vezes se tornam sem sentido. Nomeie o destino. Você ainda pode soar amigável — só seja específico.

Texto de link descritivo

html
HTML Code 
<!-- Prefer -->
<p><a href="pricing.html">View pricing plans</a></p>

<!-- Avoid as the only cue -->
<p><a href="pricing.html">Click here</a></p>

Absoluto vs relativo — escolha conforme o trabalho

  • Site externo que você não controla → absoluto https://…
  • Outra página no seu projeto → caminho relativo quando possível
  • Links do mesmo site escritos como absolutos ainda funcionam, mas links relativos permanecem portáteis quando você renomeia um domínio ou abre arquivos localmente
    Sessões posteriores cobrem títulos em links, favoritos (#) e links de e-mail; domine primeiro a + href.

Links quebrados e 404s

Se href aponta para um arquivo ausente ou um host digitado errado, o navegador navega para uma página de erro (muitas vezes HTTP 404). O HTML ao redor do link ainda pode parecer perfeito. Sempre verifique caminhos do mesmo jeito que verificou caminhos de favicon e folha de estilo: ortografia, pastas e se o arquivo de destino foi salvo.

Pratique no seu editor

  1. Crie index.html e about.html na mesma pasta.
  2. Na página inicial, adicione um link relativo para about.html com texto descritivo.
  3. Na página sobre, adicione um link relativo de volta para index.html.
  4. Adicione um link absoluto para um site externo de confiança.
  5. Siga cada link no navegador; depois quebre de propósito um caminho relativo, observe a falha e corrija.
  6. Reescreva qualquer texto “clique aqui” em um nome de destino.

Erros fáceis

  • Esquecer href para que o texto não seja um hiperlink de verdade
  • Usar “clique aqui” ou “link” para cada destino
  • Caminhos relativos quebrados depois de mover arquivos entre pastas
  • Erros de digitação em https:// ou no domínio para URLs externas
  • Colocar espaços em nomes de arquivo e depois se perguntar por que links relativos falham
  • Aninhar conteúdo interativo com descuido (mantenha links de iniciante simples: texto dentro de a)

Resumo

  • Links usam o elemento a com um destino href
  • URLs absolutas incluem um esquema como https://
  • URLs relativas apontam para outros arquivos no seu site
  • Escreva texto de link claro e descritivo para todos — inclusive tecnologia assistiva
  • Caminhos quebrados falham na hora da navegação mesmo quando as tags parecem válidas

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
6
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Html Tutorial