Como Criar Links em HTML: O Guia Definitivo da Tag <a>
Chegamos à aula que é o verdadeiro coração da internet. Se a web fosse uma cidade gigante, os links seriam as ruas e avenidas que conectam tudo. Sem eles, você estaria preso em uma única página para sempre.
Aprender a criar links é uma habilidade fundamental no nosso curso de HTML. Hoje, vamos além do básico: você vai aprender a sintaxe correta, como abrir links em novas abas, boas práticas de SEO e como conectar números de telefone e e-mails diretamente no seu código.
Quer se tornar um Webmaster Certificado?
Não apenas leia tutoriais: construa uma carreira. Aprenda a criar, otimizar e monetizar sites profissionais com nosso material completo.
O que é um link na linguagem HTML?
Link (abreviação de hyperlink) significa ligação, elo ou conexão. Em HTML, um link é um elemento clicável que transporta o usuário de um local para outro.
Um link não precisa apontar apenas para outro site. Ele pode apontar para:
- Uma página diferente dentro do seu próprio site.
- Uma parte específica da mesma página (para rolar a tela automaticamente).
- Um arquivo para download (PDF, imagem, etc.).
- Um endereço de e-mail ou número de telefone.
A Tag Âncora <a>: Como criar o seu primeiro link
Para criar um link em HTML, usamos a tag <a> (que vem da palavra anchor, ou âncora em inglês). Mas a tag sozinha não faz nada. Ela precisa de uma "bússola" para saber para onde ir. Essa bússola é o atributo href (Hypertext Reference).
Sintaxe Básica:
Exemplo Prático:
<a href="http://www.programacaoprogressiva.net/">Acesse o HTML Progressivo</a>Resultado Visual: Acesse o HTML Progressivo
Abrindo Links em uma Nova Aba (O Atributo Target)
Se você colocar um link para outro site (um concorrente, por exemplo), o usuário sairá do seu site. Para evitar perder seu visitante, você pode forçar o link a abrir em uma nova aba do navegador.
Para isso, usamos o atributo target="_blank".
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Pesquisar no Google</a>target="_blank", adicione também rel="noopener noreferrer". Isso impede que o site de destino controle a aba do seu site original através de scripts maliciosos.
Tipos Avançados de Links: E-mail e Telefone
Na era dos smartphones, facilitar o contato é essencial. Você pode criar links que abrem diretamente o WhatsApp, o discador do celular ou o aplicativo de e-mail do usuário.
| Tipo de Link | Código HTML | Ação no clique |
|---|---|---|
| E-mail (mailto) | href="mailto:contato@site.com" |
Abre o Outlook, Gmail ou app de e-mail padrão. |
| Telefone (tel) | href="tel:+5511999999999" |
Abre o discador do celular com o número pronto. |
| Link Interno (#) | href="#rodape" |
Rola a página até a tag que possui o id="rodape". |
Exemplo Completo: Código HTML com Vários Links
Vamos juntar todo o conhecimento da nossa apostila (estrutura básica, head, meta tags e links) em um único arquivo profissional:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="description" content="Curso completo de HTML focado em links e tags de ancoragem.">
<title>Meus Primeiros Links em HTML</title>
</head>
<body>
<h1>Bem-vindo ao meu primeiro site interativo</h1>
<p>Para aprender a programar do zero, visite o <a href="http://www.htmlprogressivo.net/" target="_blank" rel="noopener noreferrer">HTML Progressivo</a>.</p>
<p>Se você quer entender como o Google funciona, leia nosso guia de <a href="http://www.htmlprogressivo.net/p/seo-trabalhando-com-o-google.html">SEO Profissional</a>.</p>
<p>Ficou com dúvidas? <a href="mailto:duvidas@meusite.com">Envie um e-mail para nós</a>.</p>
</body>
</html>🚨 Regra de Ouro do SEO: Pare de usar "Clique Aqui"
Sabe aqueles sites que escrevem: "Para baixar nossa apostila, clique aqui."? Isso é um crime contra o SEO e a acessibilidade.
O Google (e os leitores de tela para deficientes visuais) varrem a sua página lendo os textos dos links. Se o robô lê "Clique Aqui", ele não sabe sobre o que é aquele link. Se ele lê "Baixar Apostila de HTML", ele entende perfeitamente o contexto e rankeia seu site melhor.
Certo: Baixe nossa apostila gratuita de HTML.
FAQ - Perguntas Frequentes sobre Links em HTML
1. Posso colocar uma imagem dentro de um link?
Sim! Basta colocar a tag <img> entre a abertura e o fechamento da tag <a>. Assim, a imagem inteira se torna clicável.
2. O que acontece se eu esquecer o "http://" no href?
Se você tentar linkar um site externo sem o http:// ou https://, o navegador vai achar que você está tentando acessar uma pasta dentro do seu próprio site, e o link dará erro (Página não encontrada).
3. É obrigatório fechar a tag de link?
Sim, </a> é estritamente obrigatório. Se você esquecer, todo o texto do restante da sua página vai se transformar em um link gigante.
🏋️ Exercício Final
Crie um arquivo HTML5 completo (com <html>, <head>, meta tags corretas e <body>).
Dentro do corpo da página, escreva um parágrafo de apresentação sobre você e crie 3 links distintos:
- Um link para o seu site favorito (que deve abrir em uma nova aba).
- Um link que aponte para um e-mail de contato falso (usando mailto:).
- Um link com a palavra âncora bem otimizada para SEO (nada de "clique aqui").
Use as tags <p> para separar os parágrafos ou <br> para quebrar as linhas. Salve e teste no seu navegador!
Nenhum comentário:
Postar um comentário