Como criar links no HTML.
Bem-vindo(a) ao post no blog.
Além disso, vamos explorar a famosa tag <a> (âncora), responsável por transformar textos e elementos em links clicáveis, permitindo a interação do usuário com o seu site.
🌐 O que é um link (hiperlink)?
Um link (ou hiperlink) é um elemento que conecta um documento ou parte de um documento a outro.
A tag responsável pelos links é a <a>, que vem de “anchor” (âncora).
🧩 Estrutura básica da tag <a>
<a href="URL" target="_self">Texto clicável</a>
href → Define o destino do link (página, arquivo ou URL externa).
target → Define onde o link será aberto (na mesma aba, nova aba, etc.).
💡 Exemplo prático:
<a href="https://www.w3.org">Visite o site da W3C</a>
🔗 Tipos de Links
Os links podem ser internos (para páginas dentro do mesmo site) ou externos (para outros sites).
🌍 Links Externos
São os links que apontam para outros sites ou domínios.
<a href="https://developer.mozilla.org/" target="_blank">MDN Web Docs</a>
target="_blank" → abre o link em uma nova aba;
rel="noopener noreferrer" → boa prática de segurança ao abrir nova aba (evita acesso indevido ao window.opener).
💡 Exemplo completo:
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">
Documentação oficial do HTML
</a>
🔎 Veja como fica no VScode
🏠 Links Internos
Conectam páginas do mesmo projeto ou domínio.
💡 Exemplo:
<a href="https://www.academycodechrist.com.br/2026/03/como-os-textos-sao-estruturados-em-html.html">Ir para a página Academy Code Christ</a>
🔎 Veja como fica no VScode
🔎 Dica:
Garanta que o arquivo contato.html esteja na mesma pasta ou ajuste o caminho relativo:
● href="pasta/contato.html" → dentro de uma subpasta
● href="../index.html" → retorna uma pasta acima
🔁 Links Entre Sessões da Mesma Página (Âncoras Internas)
Você pode criar links que levam a partes específicas de uma mesma página.
Para isso, usamos IDs nos elementos e referências com # nos links.
💡 Exemplo prático:
<h2 id="inicio">Início da Página</h2>
<p>Conteúdo introdutório...</p>
<a href="#inicio">Voltar para o início</a>
🔎 Veja como fica no VScode
✅ Quando o usuário clicar no link, o navegador rolará automaticamente até o elemento com o id="inicio".
🧭 Links para Arquivos e Downloads
Além de páginas, você também pode usar links para baixar documentos, imagens, PDFs e outros arquivos.
💡 Exemplo:
<a href="documentos/manual.pdf" download>Baixar Manual do Curso (PDF)</a>
O atributo download → indica ao navegador que o destino deve ser baixado em vez de aberto.
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🔎 Dica de ☕ cafezinho:
Para que o link funcione corretamente, o arquivo não pode estar apenas no seu computador.Ele precisa estar hospedado em um servidor ou dentro do próprio site. O navegador só consegue acessar arquivos que estejam disponíveis na internet.
Por isso, no atributo href, usamos caminhos como:
Esse caminho indica que o arquivo está dentro da estrutura do site.
✉️ Link de E-mail (mailto:)
É possível criar links que abrem o programa de e-mails do usuário, já com o destinatário preenchido.
💡 Exemplo:
<a href="mailto:contato@meusite.com">Envie um e-mail para nós</a>
🔎 Veja como fica no VScode
Você também pode inserir assunto e corpo automaticamente:
<a href="mailto:contato@meusite.com?subject=Dúvida&body=Olá! Tenho uma dúvida sobre o curso.">
Envie-nos uma mensagem
</a>
📞 Link para Telefone (tel:)
Em sites móveis, esse formato permite iniciar chamadas diretamente.
💡 Exemplo:
<a href="tel:+5511999999999">Ligar para Atendimento</a>
🔎 Veja como fica no VScode
🔎 Dica de ☕ cafezinho:
Para criar um link que inicia uma ligação, usamos o protocolo tel::
Já para redirecionar o usuário para o WhatsApp, utilizamos links específicos da plataforma:
Ou para grupos:
⚠️Atenção:
📞 O protocolo tel: → apenas telefone
❌ Não misturar os dois
🧱 Estruturando um Menu de Navegação
Menus de navegação ajudam o usuário a se deslocar entre páginas e seções.
No HTML, normalmente são criados combinando <nav>, <ul> e <a>.
💡 Exemplo — menu básico:
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="servicos.html">Serviços</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
🔎 Isso cria um menu horizontal simples (que depois pode ser estilizado via CSS).
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
💬 Boas práticas:
● Sempre agrupe os links de navegação dentro da tag <nav>;
● Dê nomes descritivos ao texto dos links (nunca apenas “Clique aqui”);
● Prefira rotas curtas e claras, como sobre.html em vez de pagina_sobre_nos.html.
🧠 Atributos Avançados da Tag <a> e descrição.
title → Texto que aparece ao passar o mouse sobre o link.
target="_self" → Abre o link na mesma aba (padrão).
target="_blank" → Abre em nova aba.
rel="nofollow" → Informa aos mecanismos de busca para não seguir o link (usado em links patrocinados).
download → Indica que o destino deve ser baixado.
💡 Exemplo completo:
<a href="arquivos/guia.pdf" title="Baixar guia completo"
download target="_blank" rel="noopener noreferrer"> Baixar o Guia em PDF</a>
🔎 Veja como fica no VScode
💻 Exemplo Prático de Navegação Completa
Crie um conjunto de páginas em um mesmo diretório:
/projeto_html
├── index.html
├── sobre.html
├── contato.html
index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Página Inicial</title>
</head>
<body>
<nav>
<a href="index.html">Início</a> |
<a href="sobre.html">Sobre</a> |
<a href="contato.html">Contato</a>
</nav>
<h1>Bem-vindo ao Blog Academy Code Christ</h1>
<p>Aprenda do zero até o avançado! Programação.</p>
</body>
</html>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
🧩 Boas Práticas de Usabilidade
1. Clareza → o texto do link deve indicar com precisão o destino.
2. Coerência visual → mantenha o mesmo estilo para links semelhantes.
3. Feedback → destaque links ao passar o mouse (CSS: a:hover).
4. Acessibilidade → evite links genéricos (“clique aqui”), prefira textos significativos.
5. Teste sempre → certifique-se de que todos os links funcionam corretamente e não quebram rotas.
📚 Continue aprendendo HTML:
Nesse post você vai descobrir o que é HTML, como ele funciona, sua história e como começar a programar do zero.
Comentários
Postar um comentário