Links HTML
Os links são encontrados em quase todas as páginas da web. Os links permitem que os usuários cliquem de uma página para outra.
Links HTML - Hiperlinks
Links HTML são hiperlinks.
Você pode clicar em um link e pular para outro documento.
Quando você move o mouse sobre um link, a seta do mouse se transforma em uma pequena mão.
Nota: Um link não precisa ser texto. Um link pode ser uma imagem ou qualquer outro elemento HTML!
Links HTML - Sintaxe
A tag HTML <a>define um hiperlink. Tem a seguinte sintaxe:
<a href="url">link text</a>
O atributo mais importante do <a> elemento é o
hrefatributo, que indica o destino do link.
O texto do link é a parte que ficará visível para o leitor.
Clicar no texto do link enviará o leitor para o endereço de URL especificado.
Exemplo
Este exemplo mostra como criar um link para W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Por padrão, os links aparecerão da seguinte forma em todos os navegadores:
- Um link não visitado está sublinhado e azul
- Um link visitado é sublinhado e roxo
- Um link ativo está sublinhado e vermelho
Dica: É claro que os links podem ser estilizados com CSS, para obter outra aparência!
Links HTML - O atributo de destino
Por padrão, a página vinculada será exibida na janela atual do navegador. Para alterar isso, você deve especificar outro destino para o link.
O targetatributo especifica onde abrir o documento vinculado.
O targetatributo pode ter um dos seguintes valores:
_self- Padrão. Abre o documento na mesma janela/guia em que foi clicado_blank- Abre o documento em uma nova janela ou guia_parent- Abre o documento no quadro pai_top- Abre o documento em todo o corpo da janela
Exemplo
Use target="_blank" para abrir o documento vinculado em uma nova janela ou guia do navegador:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
URLs absolutos x URLs relativos
Ambos os exemplos acima estão usando uma URL absoluta (um endereço completo da web) no hrefatributo.
Um link local (um link para uma página dentro do mesmo site) é especificado com um URL relativo (sem a parte "https://www"):
Exemplo
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Links HTML - Use uma imagem como link
Para usar uma imagem como link, basta colocar a <img>
tag dentro da <a>tag:
Exemplo
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link para um endereço de e-mail
Use
mailto:dentro do
hrefatributo para criar um link que abre o programa de e-mail do usuário (para permitir que ele envie um novo e-mail):
Exemplo
<a href="mailto:[email protected]">Send email</a>
Botão como link
Para usar um botão HTML como um link, você precisa adicionar algum código JavaScript.
JavaScript permite especificar o que acontece em determinados eventos, como o clique de um botão:
Exemplo
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Dica: saiba mais sobre JavaScript em nosso Tutorial de JavaScript .
Títulos de links
O titleatributo especifica informações extras sobre um elemento. As informações geralmente são mostradas como um texto de dica de ferramenta quando o mouse se move sobre o elemento.
Exemplo
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Mais sobre URLs absolutos e URLs relativos
Exemplo
Use um URL completo para vincular a uma página da web:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Exemplo
Link para uma página localizada na pasta html no site atual:
<a href="/html/default.asp">HTML tutorial</a>
Exemplo
Link para uma página localizada na mesma pasta da página atual:
<a href="default.asp">HTML tutorial</a>
Você pode ler mais sobre caminhos de arquivo no capítulo Caminhos de arquivo HTML .
Resumo do capítulo
- Use o
<a>elemento para definir um link - Use o
hrefatributo para definir o endereço do link - Use o
targetatributo para definir onde abrir o documento vinculado - Use o
<img>elemento (dentro<a>de ) para usar uma imagem como link - Use o
mailto:esquema dentro dohrefatributo para criar um link que abre o programa de e-mail do usuário
Tags de link HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .