HTML – 30/03/2026

Por /

Links em HTML (Tag <a>)

Os links em HTML são criados usando a tag âncora <a> (anchor). Eles permitem navegar entre páginas, arquivos, partes do mesmo documento ou até abrir aplicativos (como e-mail e WhatsApp).

Estrutura básica

<a href="https://www.google.com">Acessar o Google</a>
  • <a> → tag de link
  • href → destino do link (URL)

1. Link externo (para outro site)

<a href="https://www.youtube.com">YouTube</a>

2. Link interno (para outra página do site)

<a href="contato.html">Página de Contato</a>

3. Link para e-mail

<a href="mailto:exemplo@email.com">Enviar e-mail</a>

4. Link para telefone

<a href="tel:+5585999999999">Ligar</a>

5. Link para WhatsApp

<a href="https://wa.me/5585999999999">Falar no WhatsApp</a>

6. Link para download

<a href="arquivo.pdf" download>Baixar arquivo</a>

7. Link para uma parte da mesma página (âncora)

<a href="#secao1">Ir para Seção 1</a>
<h2 id="secao1">Seção 1</h2>

target

Define onde o link será aberto.

<a href="https://google.com" target="_blank">Abrir em nova aba</a>
  • _self → mesma aba (padrão)
  • _blank → nova aba

title

Mostra uma dica ao passar o mouse:

<a href="https://google.com" title="Ir para o Google">Google</a>

Link com imagem

Você pode usar uma imagem como link:

Exemplo completo

Resumo rápido

  • <a> cria links
  • href define o destino
  • Pode apontar para sites, páginas HTML, arquivos, e-mails, telefone e âncoras
  • Pode ser estilizado com CSS
  • Pode envolver imagens

ATIVIDADE DE LABORATÓRIO

  1. Crie um título <h1> e um link (<a>) para o Google que abra em nova aba. (use target=”_blank”)
  2. Crie uma lista (<ul>) com 3 itens. Dentro de cada item, use uma tag <a> para criar 03 links direcionando para os três sites abaixo:
    – https://olimpiada.ic.unicamp.br
    – https://obr.robocup.org.br
    – https://obmep.org.br
  3. Crie uma nova página HTML chamada sobre contato.html, nela crie um codigo com o seu contato (nome e telefone, pode usar <h2> para isso). Após criar a página, volte no código da questão 2 e adicione um novo link na lista para direcionar para a página recém criada “contato.html“.

Rolar para cima