Vínculos (Links) em HTML

A HTML usa um hipervínculo (hiperlink) para vincular-se a outro documento na Web.

Exemplos

Crie hipervínculos
Este exemplo demonstra como criar vínculos em um documento HTML.

Uma imagem como vínculo
Este exemplo demonstra como usar uma imagem como vínculo.

(Você encontrará mais exemplos na final desta página.)

A Tag Âncora e o Atributo Href

A HTML usa a tag <a> (âncora) para criar um vínculo (link) com outro documento.

Uma âncora pode apontar para qualquer recurso na Web: uma página em HTML, uma imagem, um arquivo de som, um filme, etc.

Sintaxe para criar uma âncora: 

<a href="url">Texto a ser exibido</a>

A tag <a> é usada para criar uma âncora de onde vincular, o atributo href é usado para onde endereçar o documento, e as palavras entre as tags de abertura e fechamento da âncora serão exibidas como um hipervínculo.

Esta âncora define um vínculo para as W3Schools:

<a href="http://www.w3schools.com/">Visite as W3Schools!</a>

A linha acima será mostrada assim em um navegador:

Visite as W3Schools!

A Atributo Alvo (Target)

Com o atributo alvo, você pode definir onde o documento vinculado será aberto.

A linha abaixo abrirá o documento em uma nova janela do navegador:

<a href="http://www.w3schools.com/"
target="_blank">Visite as W3Schools!</a>

A Tag Âncora e o Atributo Nome

O atributo nome é usado para criar uma âncora nomeada. Quando usamos âncoras nomeadas podemos criar vínculos que saltam diretamente para uma seção específica em uma página, em vez de deixar o usuário rolar [a janela (scroll)] por todo parte para encontrar o que ele/ela está procurando.

Abaixo está a sintaxe de uma âncora nomeada:

<a name="rótulo">Texto a ser exibido</a>

O atributo nome é usado para criar uma âncora nomeada. O nome da âncora pode ser qualquer texto que você quiser usar.

A linha abaixo define uma âncora nomeada:

<a name="dicas">Seção de Dicas Úteis</a>

Você deve observar que a âncora nomeada não é exibida de maneira especial.

Para vincular diretamente a uma seção "dicas", adicione um sinal de # e o nome da âncora no final de uma URL, como esta:

<a href="http://www.w3schools.com/html_links.asp#tips">
Saltar para a Seção de Dicas Úteis</a>

Um hipervínculo para a Seção de Dicas Úteis de DENTRO do arquivo "html_links.asp" seria assim: 

<a href="#tips">Saltar para a Seção de Dicas Úteis</a>

Observações Básicas - Dicas Úteis

Sempre adicione uma barra inclinada (? trailing slash) para referenciar subdiretórios. Se você faz um vínculo assim: href="http://www.w3schools.com/html", você irá gerar duas requisições para o servidor, porque o servidor irá adicionar uma barra ao endereço para criar um novo pedido como este: href="http://www.w3schools.com/html/"

Âncoras nomeadas são geralmente usadas para cirar "sumários" ("table of contents") no início de um documento grande. A cada capítulo dentro do documento é dado um nome de âncora, e vínculos para cada uma destas âncoras são colocados no topo do documento.

Se um navegador não puder encontrar uma âncora nomeada que foi especificada, ele vai para o topo do documento. Nenhum erro ocorre.

Mais Exemplos

Abre um vínculo em uma nova janela do navegador
Este exemplo demonstra como fazer um vínculo para outra página abrindo uma nova janela, de modo que o visitante não tenha que deixar o seu sítio da Web.

Vínculo para um local na mesma página
Este exemplo demonstra como usar um vínculo para saltar para outra parte de um documento.

Livrar-se de uma moldura (frame)
Este exemplo demonstra como livrar-se de uma moldura (frame), se o seu sítio está travado em uma moldura (frame).

Criar um vínculo de correio (mailto)
Este exemplo demonstra como fazer um vínculo para uma mensagem de correio (somente irá funcionar de vocÊ tiver o correio instalado).

Criar um vínculo de correio (mailto) 2
Este exemplo demonstra um vínculo de correio (mailto) mais complexo.

Link Tags