Docs executáveis de HTML: Link HTML

Q: Como criar um link no HTML?

Use o elemento âncora: Example . href é o destino, e o texto entre as tags é o que o leitor clica.

Q: Como fazer um link para uma parte específica da página?

Dê um id ao elemento de destino e faça o link com uma cerquilha: FAQ e FAQ . De outra página, adicione a cerquilha à URL: .

Q: Por que meu link vai para a página errada quando escrevo www?

Sem https://, o navegador trata www.example.com como um caminho relativo no seu próprio site, então o link vai para algo como yoursite.com/www.example.com. Sempre escreva o esquema em links externos: href="https://www.example.com".

Q: Uma tag a pode conter uma div?

Sim. No HTML5 um pode envolver conteúdo block como uma , um título e um parágrafo, e é assim que se fazem cards inteiros clicáveis. Ele não pode conter outro link, um botão nem qualquer outro elemento interativo.

Como criar um link no HTML

Um link é um elemento âncora, <a>, com um atributo href. href é para onde o link vai; o conteúdo entre as tags é o que o leitor clica.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Os navegadores mostram os links em azul e sublinhados e trocam o cursor por uma mãozinha. A última linha mostra por que o href importa: sem ele, <a> é texto comum. Não recebe foco, não é clicável e não tem estilo de link.

URLs absolutas e relativas

O valor de href decide para onde o link vai. As formas principais:

`href`	Vai para
`https://example.com/page`	Uma URL absoluta: exatamente esse endereço
`/about`	`about` na raiz do site atual
`about.html`	`about.html` na mesma pasta da página atual
`../index.html`	`index.html` uma pasta acima
`#pricing`	O elemento com `id="pricing"` nesta página
`/help#faq`	A seção `faq` de outra página deste site
`mailto:hi@example.com`	Um novo e-mail no app de e-mail do leitor
`tel:+15551234567`	Uma ligação, em aparelhos que conseguem ligar

Use URLs absolutas para outros sites e caminhos relativos à raiz (/about) dentro do seu: eles continuam funcionando quando a página que os contém muda de pasta.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

A última linha é o bug de link mais comum. Sem https://, o navegador lê www.wikipedia.org como um nome de arquivo na pasta atual.

Links de e-mail e telefone têm uma página própria: link mailto em HTML.

Link para uma seção da página

Qualquer elemento com um id é um destino. Faça o link com # seguido do id, e o navegador rola até ele. Clique nos links da prévia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Alguns detalhes:

O id precisa ser exatamente igual, inclusive maiúsculas e minúsculas. href="#FAQ" não encontra id="faq".
href="#top" e href="#" rolam até o topo da página mesmo quando nenhum elemento tem o id top.
O seletor :target estiliza a seção para a qual a URL aponta no momento. Numa página real ela fica destacada; a prévia rola sem mudar o endereço, então o destaque não aparece nela.
Para fazer um link para uma seção de outra página, adicione a cerquilha à URL dessa página: <a href="/docs/html/table#caption">.

Links de âncora com cabeçalho fixo

Um cabeçalho sticky ou fixo cobre o topo da seção para onde você pula. scroll-margin-top nos destinos deixa espaço para ele, e scroll-behavior: smooth anima o salto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Apague a linha scroll-margin-top e clique em Two de novo: o título fica escondido atrás do cabeçalho escuro.

Links de download

O atributo download pede ao navegador que salve o arquivo em vez de abri-lo. O valor dele, se você informar um, é o nome de arquivo sugerido:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download só funciona para arquivos na mesma origem da página (mesmo esquema, host e porta) e para URLs data: e blob:. Para um arquivo em outra origem, mesmo um subdomínio, os navegadores o ignoram e abrem o arquivo como um link normal. O servidor pode forçar o download de qualquer arquivo com o cabeçalho Content-Disposition: attachment.

Texto de link que faz sentido

Quem usa leitor de tela muitas vezes percorre a página de link em link, ouvindo só o texto do link. "Clique aqui" e "Leia mais" não dizem nada.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

O atributo title mostra uma dica ao passar o mouse, mas não aparece em telas de toque nem para a maioria de quem usa teclado, então não coloque nada importante nele.

Transformando um card inteiro num link

Um <a> pode envolver conteúdo block: um título, uma imagem e um parágrafo podem formar um único link. É assim que se fazem cards clicáveis.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block torna a caixa inteira clicável, não só o texto. Mantenha o conteúdo do card curto, porque o leitor de tela lê tudo como o nome do link. E nunca coloque outro link ou um botão dentro: elementos interativos não podem ser aninhados em <a>.

Outros atributos da tag a

Atributo	O que faz
`href`	O destino. Sem ele, `<a>` não é um link
`target`	Onde abrir; `target="_blank"` abre uma nova aba, veja abrir link em nova aba
`rel`	A relação com o destino: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Salvar o arquivo em vez de abri-lo
`hreflang`	O idioma da página de destino, como dica
`referrerpolicy`	Quanto da URL atual enviar como referenciador

Erros comuns

Nenhum esquema numa URL externa. href="www.site.com" é um caminho relativo. Escreva https://.
<a href="#"> para uma ação de JavaScript. Rola até o topo e adiciona # à URL. Se clicar não leva a lugar nenhum, use um <button>.
Um link dentro de um link, ou um botão dentro de um link. Os dois são HTML inválido: um segundo <a> faz o parser fechar o primeiro antes da hora, e um clique num botão dentro de um link não tem destino claro.
Espaços em nomes de arquivo. href="my file.html" costuma funcionar porque o navegador codifica o espaço, mas my-file.html elimina a dúvida.
"Clique aqui" como texto do link. Descreva o destino.
Diferença de maiúsculas no id. #Pricing e id="pricing" são diferentes.

Perguntas frequentes

Como criar um link no HTML?

Use o elemento âncora: <a href="https://example.com">Example</a>. href é o destino, e o texto entre as tags é o que o leitor clica.

O que significa href?

Hypertext reference, referência de hipertexto. Ele guarda a URL para onde o link aponta: um endereço completo, um caminho no mesmo site como /about, uma seção da página como #pricing ou um esquema como mailto:.

Como fazer um link para uma parte específica da página?

Dê um id ao elemento de destino e faça o link com uma cerquilha: <h2 id="faq">FAQ</h2> e <a href="#faq">FAQ</a>. De outra página, adicione a cerquilha à URL: <a href="/help#faq">.

Por que meu link vai para a página errada quando escrevo www?

Sem https://, o navegador trata www.example.com como um caminho relativo no seu próprio site, então o link vai para algo como yoursite.com/www.example.com. Sempre escreva o esquema em links externos: href="https://www.example.com".

Uma tag a pode conter uma div?

Sim. No HTML5 um <a> pode envolver conteúdo block como uma <div>, um título e um parágrafo, e é assim que se fazem cards inteiros clicáveis. Ele não pode conter outro link, um botão nem qualquer outro elemento interativo.

Conceitos relacionados