Curso de HTML / Criar links: caminhos, âncoras e endereços de e-mail

Crie um link HTML com o elemento a e coloque seu destino em href. O destino pode ser outra página, um arquivo, um local em um documento ou um endereço de email. Escreva um texto de link que indique aos leitores para onde eles irão.

Crie um link básico com a e href

Envolva o texto visível do link com a e coloque a URL de destino em href. Este exemplo leva ao curso em português da Coding Factory sobre listas HTML. Os tipos de listas vinculadas e as regras de aninhamento são explicados em Listas: ul, ol, dl, e Listas Aninhadas.

<a href="https://www.codingfactory.net/pt/18040">Tutorial sobre listas HTML</a>

"Tutorial sobre listas HTML" é o texto visível; a URL é o destino. Um a sem href não é um link de navegação normal. O uso de href="#" como espaço reservado pode provocar uma navegação inesperada para o topo da página.

Entendendo URLs absolutas e relativas

Uma URL absoluta começando com https:// inclui o domínio de destino. Uma URL relativa pode apontar para um arquivo a partir da localização do documento atual ou a partir da raiz do site. Pratique manter o mesmo menu em três documentos em Construir um pequeno site web multipáginas.

Os caminhos a seguir about.html e ../contact.html são exemplos de exercício, não páginas atualmente existentes na Coding Factory. Suponha que você está escrevendo os links em lessons/index.html nesta estrutura de pastas:

site/

  contact.html

  lessons/

    index.html

    about.html

<a href="https://www.codingfactory.net/pt/18040">URL completa</a>

<a href="about.html">Página de apresentação nesta pasta</a>

<a href="../contact.html">Página de contato na pasta pai</a>

<a href="/pt/18040">Listas HTML neste site</a>

about.html é resolvido em relação ao documento atual. Um caminho que começa com / é resolvido a partir da raiz do site. Os arquivos locais file:// têm uma raiz diferente de um site publicado, então teste novamente os caminhos relativos após a publicação.

Link para um local em um documento

Dê ao elemento de destino um id único e, em seguida, use # seguido desse valor no link.

<a href="#contact">Ir para as informações de contato</a>



<h2 id="contact">Contato</h2>

<p>As informações de contato estão aqui.</p>

Para alcançar um local em outro arquivo, adicione o fragmento ao seu URL: about.html#contact. Evite repetir o mesmo id em uma única página.

Links para e-mails e novas abas

Uma URL mailto: solicita ao aplicativo de e-mail do usuário que crie uma mensagem. Isso pode não funcionar como esperado se nenhum aplicativo de e-mail estiver configurado.

<a href="mailto:hello@example.com">Escrever um e-mail</a>

Para abrir um site externo em uma nova aba, use target="_blank" e a política rel="noopener noreferrer" do site.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">Referência do elemento a no MDN</a>

Escolha uma nova aba quando isso for apropriado para a tarefa do leitor, e esclareça o comportamento no texto do link ou na explicação próxima.

O que o atributo download pode fazer

O atributo download solicita ao navegador que baixe um arquivo vinculado. Por exemplo, ele pode ser usado para esta imagem hospedada no mesmo site.

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>Baixar a imagem de exemplo</a>

download funciona com URLs da mesma origem e com URLs blob: e data:. Ele não pode forçar o download de uma URL comum em outro site. Mesmo para um arquivo da mesma origem, as configurações do navegador e a resposta do servidor podem afetar o que acontece.

Comportamento de links e downloads na MDN

Testar caminhos relativos com três arquivos reais

Salve esses três documentos na estrutura de pastas site/ anterior. Este exercício verifica a navegação entre os arquivos em vez do envio de uma mensagem de contato real.

site/lessons/index.html

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Página inicial do exercício sobre caminhos</title>
</head>
<body>
  <h1>Página inicial do exercício sobre caminhos</h1>
  <nav aria-label="Menu do exercício">
    <a href="about.html">Apresentação</a>
    <a href="../contact.html">Contato</a>
  </nav>
</body>
</html>

site/lessons/about.html

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Apresentação</title>
</head>
<body>
  <h1>Apresentação</h1>
  <nav aria-label="Menu do exercício">
    <a href="index.html">Início do exercício</a>
    <a href="../contact.html">Contato</a>
  </nav>
</body>
</html>

site/contact.html

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contato</title>
</head>
<body>
  <h1>Contato</h1>
  <nav aria-label="Menu do exercício">
    <a href="lessons/index.html">Início do exercício</a>
    <a href="lessons/about.html">Apresentação</a>
  </nav>
</body>
</html>

Abra cada arquivo, siga seus links e compare as pastas na barra de endereços. ../ sobe um diretório. Se um link falhar, resolva-o a partir da pasta do arquivo de origem em vez de adivinhar um nome de arquivo diferente. Restaure os valores na tabela depois de experimentar.

Verifique os links antes de publicar

• Use um texto como "tutorial sobre listas HTML" em vez de "clique aqui".
• Teste os caminhos relativos a partir da localização real do documento implantado.
• Verifique se um fragmento #id corresponde exatamente ao seu destino.
• Lembre-se de que links de e-mail e de download dependem do navegador e do ambiente do usuário.

Consulte a referência do elemento a de MDN para mais detalhes sobre URLs e atributos.