Recomendação de Curso:

Atributo href do HTML <a>

href Definição e Uso

href O atributo define o URL da página para onde o link aponta. href O valor do atributo pode ser qualquer URL válida, relativa ou absoluta, incluindo identificadores de fragmentos e seções de código JavaScript. Se o usuário selecionar o conteúdo do <a>, o navegador tentará buscar e exibir

Se href Se o atributo não existir, o <a> não será um link de hipertexto.

Dica:Você pode linkar para o topo da página atual usando href="#top" ou href="#"!

Criar Link de Texto

Um <a> para referenciar outro documento pode ser na seguinte forma:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Em Linha</a>

O navegador exibe a frase "CodeW3C.com Aulas Online" com efeitos especiais (geralmente texto azul com sublinhado), para que o usuário saiba que é um link que pode levar a outro documento. Assim:

CodeW3C.com Guia Online

Os usuários também podem usar as opções do navegador para especificar a cor do texto, a cor do texto do link antes e após o link.

Dica:Pode ser usado Pseudo-classes CSSAdicionar estilos complexos e variados a links de texto.

Fazer um link de imagem

Anchors mais complexos podem conter imagens. Abaixo está um LOGO que é um link de imagem, clicando na imagem, você pode voltar para a página inicial do W3school:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

O código acima adiciona um link de volta para a página inicial de CodeW3C.com:

CodeW3C.com Guia Online

A maioria dos navegadores gráficos coloca uma borda especial ao redor da imagem que faz parte de um link. Ao colocar a imagem no tag <img>, propriedade borderDefinir como 0 pode remover a borda do link. Também pode ser usado Propriedades de borda do CSSpara alterar globalmente o estilo da borda do elemento.

Exemplo

Exemplo 1

A propriedade href define o destino do link:

<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="/i/logo/w3logo.png" width="400" height="225">
</a>

Experimente você mesmo

Exemplo 3

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

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

Experimente você mesmo

Exemplo 4

Como ligar para um número de telefone:

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

Experimente você mesmo

Exemplo 5

Como ligar para outra parte da mesma página:

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

Experimente você mesmo

Exemplo 6

Como ligar para JavaScript:

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

Experimente você mesmo

Sintaxe

<a href="URL">

Valor do atributo

Valor Descrição
URL

URL do link.

Valores possíveis:

  • URL absoluta - aponta para outro site (por exemplo href="http://www.example.com/index.html")
  • URL relativa - aponta para um arquivo dentro do site (por exemplo href="index.html")
  • Link para um elemento na página com um id específico (por exemplo href="#section2")
  • Outros protocolos (por exemplo https://, ftp://, mailto:, file: e outros)
  • Script (por exemplo href="javascript:alert('Hello');")

Suporte ao navegador

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