HTML <a> Tag
Exemplo
Crie um link para W3Schools.com:
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A <a>tag define um hiperlink, que é usado para vincular uma página a outra.
O atributo mais importante do <a>elemento é o
hrefatributo, que indica o destino do link.
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
Dicas e Notas
Dica: Se a <a>tag não tiver
hrefatributo, ela será apenas um espaço reservado para um hiperlink.
Dica: Uma página vinculada normalmente é exibida na janela atual do navegador, a menos que você especifique outro destino.
Dica: Use CSS para estilizar links: Links CSS e Botões CSS .
Suporte ao navegador
| Element | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
Atributos
| Attribute | Value | Description |
|---|---|---|
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| href | URL | Specifies the URL of the page the link goes to |
| hreflang | language_code | Specifies the language of the linked document |
| media | media_query | Specifies what media/device the linked document is optimized for |
| ping | list_of_URLs | Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer information to send with the link |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Specifies the relationship between the current document and the linked document |
| target | _blank _parent _self _top |
Specifies where to open the linked document |
| type | media_type | Specifies the media type of the linked document |
Atributos Globais
A <a>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <a>tag também suporta os atributos de evento em HTML .
Mais exemplos
Exemplo
Como usar uma imagem como link:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools"
src="logo_w3s.gif" width="100" height="100">
</a>
Exemplo
Como abrir um link em uma nova janela do navegador:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
Exemplo
Como vincular a um número de telefone:
<a href="tel:+4733378901">+47 333 78 901</a>
Exemplo
Como vincular a outra seção na mesma página:
<a href="#section2">Go to Section 2</a>
Exemplo
Como vincular a um JavaScript:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
Páginas relacionadas
Tutorial HTML: Links HTML
Referência HTML DOM: objeto âncora
Tutorial de CSS: Estilizando links
Configurações padrão de CSS
A maioria dos navegadores exibirá o <a>elemento com os seguintes valores padrão:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}