Links HTML

O HTML usa hiperlinks para conectar a outro documento na web.

Links podem ser encontrados em quase todas as páginas da web. Clicando em um link, você pode saltar de uma página para outra.

Exemplo

Criar hiperlink
Este exemplo demonstra como criar links em documentos HTML.
Usar imagem como link
Este exemplo demonstra como usar uma imagem como link.

(Mais exemplos podem ser encontrados na parte inferior dessa página.)

Hiperlink de HTML (link)

Um hiperlink pode ser uma letra, uma palavra, um grupo de palavras, ou uma imagem. Você pode clicar nesses conteúdos para saltar para um novo documento ou para uma parte específica do documento atual.

Quando você move o ponteiro do mouse sobre um link na página da web, a seta se torna um pequeno punho.

Nós criamos links usando a tag <a> no HTML.

Existem duas maneiras de usar a tag <a>:

  1. Usando a propriedade href - criando links para outro documento
  2. Usando a propriedade name - criando bookmarks dentro do documento

Leia mais:O que é hipertexto?

Sintaxe de link HTML

O código HTML de link é simples. Ele se parece com isso:

<a href="url">Texto do link</a>

A propriedade href define o destino do link.

O texto entre os tags de início e fim é exibido como um link.

Exemplo

<a href="http://www.codew3c.com/">Acesse CodeW3C.com</a>

O código acima é exibido como:Visite CodeW3C.com

Clicar neste hiperlink levará o usuário para a página inicial do CodeW3C.com.

Dica:"Texto do link" não precisa ser texto. Imagens ou outros elementos HTML podem ser links.

HTML Link - propriedade target

Usando a propriedade Target, você pode definir onde o documento vinculado será exibido.

Essa linha abrirá o documento em uma nova janela:

<a href="http://www.codew3c.com/" target="_blank">Visite CodeW3C.com!</a>

Experimente você mesmo

HTML Link - propriedade name

A propriedade name define o nome do âncora.

Você pode usar a propriedade name para criar um marcador em uma página HTML.

Os marcadores não são exibidos de forma especial, e são invisíveis para os leitores.

Quando usamos âncoras nomeadas (named anchors), podemos criar links que saltam diretamente para essa âncora (por exemplo, para um pequeno capítulo na página), para que o usuário não precise rolar a página constantemente para encontrar a informação necessária.

Sintaxe da âncora nomeada:

<a name="label">Âncora (texto exibido na página)</a>

Dica:O nome da âncora pode ser qualquer nome que você quiser.

Dica:Você pode usar a propriedade id em vez da propriedade name, e o nome da âncora ainda é válido.

Exemplo

Primeiro, nomeamos a âncora no documento HTML (criamos um marcador):

<a name="tips">Considerações básicas - Dicas úteis</a>

Então, criamos um link para essa âncora no mesmo documento:

<a href="#tips">Dicas úteis</a>

Você também pode criar um link para esse âncora em outras páginas:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Dicas Úteis</a>

No código acima, adicionamos o símbolo # e o nome da âncora ao final da URL para poder fazer links diretamente para a âncora nomeada 'tips'.

Efeito Específico:Dicas Úteis

Considerações Básicas - Dicas Úteis:

Notas:Sempre adicione a barra invertida (/) ao final do subdiretório. Se você escrever o link assim: href="http://www.codew3c.com/html", o servidor gerará duas requisições HTTP para o servidor. Isso ocorre porque o servidor adiciona a barra invertida a essa endereço e cria uma nova requisição, como esta: href="http://www.codew3c.com/html/".

Dica:As âncoras nomeadas são frequentemente usadas para criar índices no início de documentos grandes. Você pode atribuir uma âncora nomeada a cada capítulo e colocar os links para essas âncoras no topo do documento. Se você visita frequentemente o Baike Baidu, você notará que quase cada entrada usa esse tipo de navegação.

Dica:Se o navegador não encontrar uma âncora nomeada definida, ele se localizará no topo do documento. Não haverá erro.

Mais Exemplos

Abrir Link em Nova Janela do Navegador
Este exemplo demonstra como abrir uma página em uma nova janela do navegador, para que os visitantes não precisem sair do seu site.
Link para diferentes locais da mesma página
Este exemplo demonstra como usar links para saltar para outra parte do documento.
Sair do Frame
Este exemplo demonstra como sair de um frame, caso sua página esteja fixa dentro de um frame.
Criar Link de E-mail
Este exemplo demonstra como criar um link para um e-mail. (Este exemplo funciona após a instalação do cliente de e-mail.)
Criar Link de E-mail 2
Este exemplo demonstra um link de e-mail mais complexo.

Etiqueta de Link do HTML

Etiqueta Descrição
<a> Definir âncora.