Etiqueta HTML <a>

Definição e uso

<a> A tag define hiperligações, usadas para ligar uma página a outra.

<a> O atributo mais importante do elemento é Atributo hrefindicando o destino do link.

Por padrão, os links serão exibidos nos seguintes navegadores:

  • Os links que ainda não foram acessados têm sublinhado e azul
  • Os links que já foram acessados têm sublinhado e roxo
  • Os links que estão sendo acessados têm sublinhado e vermelho

Dica:Pode ter notado que os links no site CodeW3C.com têm uma aparência muito diferente da aparência padrão dos links. Você pode usar Pseudo-classes CSS Adicionar estilos complexos e variados a hiperligações de texto.

Veja também:

Tutorial de HTML:Link HTML

Manual de referência do DOM HTML:Objeto Anchor

Tutorial de CSS:Estilo de link

Explicação de termos

O que é hipertexto?

Exemplo

Exemplo 1

Criar um link para codew3c.com:

<a href="https://www.codew3c.com">acessar codew3c.com!</a>

Experimente você mesmo

Exemplo 2

Como usar uma imagem como link:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="w3logo.png" width="400" height="225">
</a>

Experimente você mesmo

Exemplo 3

Como abrir um link em uma nova janela do navegador:

<a href="https://www.codew3c.com" target="_blank">acessar codew3c.com!</a>

Experimente você mesmo

Exemplo 4

Como ligar para um endereço de e-mail:

<a href="mailto:someone@example.com">enviar e-mail</a>

Experimente você mesmo

Exemplo 5

Como ligar para um número de telefone:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Experimente você mesmo

Exemplo 6

Como linkar para outra seção na mesma página:

<a href="#section2">Ir para o capítulo 2</a>

Experimente você mesmo

Exemplo 7

Como linkar para JavaScript:

<a href="javascript:alert('Hello World!');">Executar JavaScript</a>

Experimente você mesmo

Dicas e comentários

Dica:Se o rótulo <a> não tiver o atributo href, ele é apenas um marcador de posição de hiperlink.

Dica:A página linkada geralmente é exibida na janela do navegador atual, a menos que você defina outro destino (usando o atributo target).

Dica:Use configurações CSS para definir o estilo do link:Link CSS e Botão CSS.

Atributo

Atributo Valor Descrição
download Nome do arquivo Define o alvo que será baixado quando o usuário clicar no link de hipertexto.
href URL Define a URL da página para a qual o link aponta.
hreflang Código de idioma Define o código de idioma do documento linkado.
media Consultas de mídia Define para qual tipo de mídia/dispositivo o documento linkado é otimizado.
ping Lista de URLs Define uma lista de URLs separados por espaço, quando o link for acessado, o navegador enviará uma solicitação POST com o corpo do ping (enviado em segundo plano). Usualmente usado para rastreamento.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Define as informações de referência a serem enviadas junto com o link.
rel
  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
 Define a relação entre o documento atual e o documento linkado.
target
  • _blank
  • _parent
  • _self
  • _top
 Define onde o documento linkado será aberto.
type Tipo de mídia Define o tipo de mídia do documento linkado.

Atributos globais

<a> Os rótulos também suportam Atributos globais no HTML.

Atributos de evento

<a> Os rótulos também suportam Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores exibirá os seguintes valores padrão: <a> Elemento:

a:link, a:visited {
  color: (valor interno);
  text-decoration: underline;
  cursor: auto;
}
a:link:active, a:visited:active {
  color: (valor interno);
}

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte