Links

Links são o “Hyper” do HTML: saltam para outra página, outro site ou outro trecho da mesma página. No Belavista, a navegação entre cartazes, oficinas e contato começa aqui.

O exemplo deste capítulo é 08-links, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Usar a com href.
• Distinguir links relativos, absolutos e âncoras.
• Escrever texto de link compreensível fora de contexto.
• Conhecer target e quando evitar _blank sem aviso.
• Usar download e mailto com cuidado.

Anatomia do link

<a href="oficinas.html">Oficinas</a>

O conteúdo entre as tags é o que a pessoa vê e ativa. Evite “clique aqui”. Prefira “Ver oficinas de tipografia”.

Relativos, absolutos e âncoras

• Relativo: cartazes/maio.html — em relação à página atual.
• Absoluto: https://exemplo.invalid/belavista — URL completa (use domínio fictício em exercícios).
• Âncora: #agenda — salta para id="agenda" na mesma página.

Caminhos relativos quebram se a pasta do exemplo mudar. Confira a pasta antes de acusar o HTML.

Abrir em nova aba

target="_blank" abre outra aba. Combine com rel="noopener noreferrer" por segurança quando for link externo. Avise no texto se a nova aba for inesperada. Em curso local, prefira mesma aba.

mailto e tel

href="mailto:contato@belavista.exemplo" e tel: disparam apps do sistema. Use dados fictícios. Formulário HTML (capítulo 12) é melhor para pedidos estruturados — e aqui o envio é só demonstração.

Erro comum: href="#" em todo botão falso, sem destino. Ou esquecer o href, transformando o a em algo que não navega de verdade. Outro clássico: link cujo texto é só “saiba mais” repetido dez vezes.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Links — Belavista</title>
  </head>
  <body>
    <header>
      <nav aria-label="Principal">
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="#cartazes">Cartazes</a></li>
          <li><a href="oficinas.html">Oficinas</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Links do ateliê</h1>
      <p>
        Visite a página fictícia
        <a href="https://exemplo.invalid/belavista" rel="noopener noreferrer">exemplo.invalid/belavista</a>.
      </p>
      <h2 id="cartazes">Cartazes</h2>
      <p><a href="cartazes/maio.html">Cartaz de maio — Rua da Aurora</a></p>
      <p><a href="arquivos/folha-de-sala.pdf" download>Baixar folha de sala (demo)</a></p>
    </main>
  </body>
</html>

Mude só o href da âncora e preveja se o salto ainda funciona.

Botão ou link?

Se a ação navega para um recurso, use a. Se dispara uma ação na página (enviar formulário, abrir dialog), use button. Não estilize div para parecer link sem teclado e sem semântica.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual a diferença entre href="oficinas.html" e href="#oficinas"?
2. Por que textos de link devem fazer sentido sozinhos?
3. Quando preferir button em vez de a?

Respostas comentadas

1. O primeiro carrega outro documento (relativo). O segundo salta para um id na página atual.
2. Porque listas de links em leitores de tela e varredura visual precisam do destino sem ler a frase inteira ao redor.
3. Quando a ação não muda de URL de recurso, e sim executa comando na interface (enviar, abrir modal, etc.).