Links em HTML: Conectando Páginas, Arquivos e o Resto da Internet
Um site sem links em HTML é só um documento isolado. O que transforma um punhado de páginas HTML em uma rede — a própria ideia por trás do nome “World Wide Web” — é o elemento âncora: a tag <a>. Neste artigo vamos ver como conectar sua página ao resto da web, aos próprios arquivos do projeto, e até a e-mails e telefones.
Este é o sexto artigo da série sobre Linguagem de Marcação. Se ainda não leu, comece por Cores e Imagens em HTML.
Publicado por Washington | washington.pro.br
O elemento âncora
Links em HTML
<a href="https://washington.pro.br">Visite o blog</a>O atributo href (hypertext reference) define para onde o link aponta. Tudo entre a tag de abertura e fechamento é o texto (ou imagem) clicável.
Links em HTML externos
Apontam para outro site, usando a URL completa:
html
<a href="https://www.w3.org" target="_blank" rel="noopener noreferrer">Validador do W3C</a>O atributo target="_blank" abre o link em uma nova aba. Quando você usa target="_blank", é boa prática acrescentar rel="noopener noreferrer" — isso evita que a página aberta tenha acesso à página de origem por razões de segurança e performance.
Links em HTML internos (entre páginas do mesmo site)
Usam caminhos relativos em vez da URL completa:
html
<a href="sobre.html">Sobre nós</a>
<a href="contato.html">Fale conosco</a>
<a href="../index.html">Voltar para a página inicial</a>Caminhos relativos (sobre.html, ../index.html) apontam para arquivos dentro da mesma estrutura de pastas do projeto — diferente da URL completa usada em links externos.
Links âncora (dentro da mesma página)
Quando você quer levar o usuário para uma seção específica da própria página — muito comum em landing pages com menu de navegação fixo:
html
<a href="#contato">Ir para contato</a>
<!-- mais abaixo na página -->
<h2 id="contato">Contato</h2>O #contato no href procura por um elemento com id="contato" na página e rola até ele. Todo id deve ser único dentro da página — se dois elementos tiverem o mesmo id, o navegador só vai considerar o primeiro.
Links em HTML de e-mail e telefone
html
<a href="mailto:contato@padariapaonosso.com.br">Envie um e-mail</a>
<a href="tel:+551199999999">Ligue agora</a>O mailto: abre o cliente de e-mail padrão do usuário com o campo “para” já preenchido. O tel: é especialmente útil em sites acessados no celular, onde o link já dispara a ligação.
Download de arquivos
html
<a href="cardapio.pdf" download>Baixar cardápio em PDF</a>O atributo download instrui o navegador a baixar o arquivo em vez de tentar abri-lo na própria aba — útil para PDFs, imagens em alta resolução, ou qualquer arquivo que o usuário deva salvar.
Links em HTML absolutos vs. relativos: qual usar?
| Tipo | Exemplo | Quando usar |
|---|---|---|
| Absoluto | https://outrosite.com/pagina | Link para outro domínio |
| Relativo | sobre.html ou ../pasta/arquivo.html | Link para outra página do mesmo projeto |
| Âncora | #secao | Navegação dentro da mesma página |
Usar caminho relativo entre páginas do mesmo projeto tem uma vantagem prática: se você mover o site inteiro para outro domínio, os links internos continuam funcionando sem precisar editar nada.
Aplicando ao nosso projeto
O menu de navegação da nossa landing page fica assim, combinando links âncora para rolar até cada seção da própria página:
html
<nav>
<a href="#sobre">Sobre nós</a>
<a href="#diferenciais">Diferenciais</a>
<a href="#contato">Contato</a>
</nav>
<!-- e no rodapé -->
<footer>
<a href="tel:+551199999999">(11) 99999-9999</a>
<a href="mailto:contato@padariapaonosso.com.br">contato@padariapaonosso.com.br</a>
</footer>Exemplo Completo — Página Inteira, Todos os Links Juntos
Até aqui você viu cada tipo de link isoladamente — mas isso é como ver as peças de um quebra-cabeça sem nunca ver a imagem final montada. Veja agora como todos eles convivem dentro de uma página real e completa:
html
Repare como o mesmo id="contato" que aparece no <h2> é o destino do <a href="#contato"> lá no menu — é a mesma lógica explicada isoladamente antes, agora funcionando dentro do fluxo real da página, do topo ao rodapé.
o próximo bloco de conteúdo natural para uma landing page é organizar informação em listas — do menu de produtos aos diferenciais do negócio. No próximo artigo, vamos ver os diferentes tipos de lista em HTML e quando usar cada um.
Este artigo faz parte da série sobre a unidade curricular Linguagem de Marcação. Acompanhe os próximos posts toda terça-feira aqui no blog.
Compartilhe:
Publicar comentário