Tag HTML <a>
A tag HTML <a> cria hiperlinks para páginas, arquivos, seções e links de e-mail ou telefone. Veja exemplos de target, rel e download.
A tag <a> é usada para inserir hiperlinks para outras páginas ou arquivos, localizações dentro da mesma página, endereços de e-mail ou qualquer outra URL. É possível usar tanto texto quanto imagem como hiperlink.
No navegador, os hiperlinks se diferenciam pela aparência e cor. Por padrão, os links HTML aparecem como texto azul sublinhado. Ao passar o mouse sobre um link, ele fica vermelho (link ativo). Links já visitados ficam roxos.
Você pode alterar a cor dos links, remover o sublinhado ou mudar a cor dos links usando estilos CSS.
Os atributos "download", "media", "hreflang", "target", "rel" e "type" só estarão presentes se o atributo "href" estiver presente.
Até que você defina outro target, a página vinculada é exibida na janela atual do navegador.
Sintaxe
A tag <a> é usada em pares. O destino do link é definido com o atributo href na tag de abertura, e o conteúdo clicável (texto ou imagem) é escrito entre as tags de abertura (<a>) e fechamento (</a>).
<a href="https://www.w3docs.com/">Visit W3docs</a>O texto "Visit W3docs" torna-se o hiperlink clicável, e ao clicar nele o usuário é redirecionado para a URL definida em href.
Atributos
A tag <a> pode ter atributos que fornecem informações adicionais sobre ela.
O atributo href
O href é um atributo obrigatório da tag <a>. Ele define um link na página web ou um local na mesma página web para o qual o usuário navega após clicar no link. O valor do atributo é uma âncora ou uma URL. A âncora aponta para o ID (identificador único) da parte da página web referenciada. Antes do ID colocamos um hash (#).
Fica assim:
Tag HTML <a>
<a href="url">the link text</a>
<a href="#a">the link text</a>Exemplo da tag HTML <a> com o atributo href:
Exemplo da Tag HTML <a> | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Resultado
Clique no link e você será redirecionado para a página inicial do nosso site.
Usando o atributo href da tag <a> com a tag <img>, você pode criar uma imagem com link.
Exemplo da tag HTML <a> para criar uma imagem com link:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
height: 90vh;
}
</style>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/France">
<img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
</a>
</body>
</html>O atributo target
O atributo target é usado para indicar ao navegador onde abrir o documento (por padrão, os links são abertos na janela atual).
O atributo target pode ter os seguintes valores:
_blank– abre o link em uma nova janela ou aba._self– abre o link na janela atual (este é o padrão)._parent– abre o documento no frame pai._top– abre o documento no corpo completo da janela.
Exemplo da tag HTML <a> com o atributo target:
Exemplo da Tag HTML <a> com o atributo target | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Resultado
Segurança com target="_blank": rel="noopener noreferrer"
Quando você abre um link em uma nova aba com target="_blank", a página recém-aberta pode, em navegadores mais antigos, obter acesso à sua página por meio da propriedade JavaScript window.opener. Uma página maliciosa poderia usar isso para redirecionar sua aba original para um site de phishing — um ataque conhecido como reverse tabnabbing.
Para evitar isso, adicione rel="noopener noreferrer":
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
External site
</a>noopener– definewindow.openercomonullna nova aba, impedindo que a página de destino controle ou referencie a página que a abriu.noreferrer– faz o mesmo quenoopenere também impede o navegador de enviar o cabeçalhoReferer, de modo que o destino não saiba de qual página o visitante veio.
Os navegadores modernos agora implicam noopener automaticamente para qualquer link com target="_blank", mas é uma boa prática definir rel explicitamente para que a proteção também se aplique em navegadores mais antigos e fique visível no seu código.
O atributo rel
Este atributo define a relação do documento atual com o documento vinculado. Os valores do atributo podem ser:
alternate– uma versão alternativa do documento.author– referência ao autor do documento ou artigo.bookmark– um link permanente para uso em favoritos.nofollow– links para um documento não endossado (informa aos mecanismos de busca que o crawler não deve seguir esse link).noopener/noreferrer– valores de segurança usados comtarget="_blank"(veja acima).
Valor nofollow
Se você quiser criar um link nofollow, use rel="nofollow". Isso informa aos mecanismos de busca que você não apoia o conteúdo do outro lado do link. O valor nofollow do atributo é geralmente usado em links pagos e publicidade. Às vezes o nofollow é considerado uma tag ou atributo, mas na verdade é um valor do atributo rel.
Exemplo do atributo rel com o valor "nofollow":
Exemplo do atributo "rel" com o valor "nofollow":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
</body>
</html>O atributo download
O atributo download instrui o navegador a baixar o recurso vinculado em vez de navegar até ele. Funciona para recursos servidos da mesma origem (e para URLs blob: e data:).
Se você atribuir um valor ao atributo, esse valor se tornará o nome de arquivo sugerido para o arquivo salvo, independentemente do nome do arquivo no servidor. Se deixá-lo vazio, o navegador mantém o nome de arquivo original.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Saves the file using its original name -->
<a href="/files/report.pdf" download>Download the report</a>
<!-- Saves the same file as "annual-report.pdf" -->
<a href="/files/report.pdf" download="annual-report.pdf">
Download the annual report
</a>
</body>
</html>Links de e-mail e telefone: mailto: e tel:
Além de URLs comuns, o atributo href pode conter esquemas especiais que abrem o aplicativo de e-mail ou telefone do visitante em vez de uma página web.
Um link mailto: abre o cliente de e-mail padrão com o endereço preenchido automaticamente. Você também pode adicionar um assunto e corpo usando parâmetros de consulta:
<a href="mailto:[email protected]">Email us</a>
<a href="mailto:[email protected]?subject=Hello&body=I%20have%20a%20question">
Email us about your question
</a>Um link tel: solicita ao dispositivo que ligue para o número, o que é especialmente útil em telefones celulares:
<a href="tel:+1234567890">Call us: +1 (234) 567-890</a>Links para uma seção na mesma página (fragmentos)
Para ir a uma parte específica de uma página, defina href com um hash (#) seguido pelo id do elemento de destino. Isso é chamado de link de fragmento ou âncora.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- The link -->
<a href="#section2">Go to Section 2</a>
<h2 id="section1">Section 1</h2>
<p>First section content...</p>
<!-- The target: its id matches the href without the # -->
<h2 id="section2">Section 2</h2>
<p>Second section content...</p>
</body>
</html>Clicar no link rola a página até o elemento cujo id corresponde ao valor após o #. Você também pode vincular a uma seção de outra página combinando uma URL e um fragmento, por exemplo href="page.html#section2". Para saber mais sobre como construir endereços de link, consulte HTML URL.
O atributo hreflang
O atributo hreflang indica o idioma do documento para o qual o link aponta (por exemplo, hreflang="es" para uma página em espanhol). É puramente informativo — usado por mecanismos de busca e tecnologia assistiva — e não altera a página atual. Isso é diferente do atributo global lang, que declara o idioma do elemento no qual está colocado.
<a href="https://es.example.com/" hreflang="es">Versión en español</a>Acessibilidade: escreva textos de link descritivos
Usuários de leitores de tela frequentemente navegam saltando de link em link, ouvindo apenas o texto do link fora de contexto. Textos genéricos como "clique aqui" ou "leia mais" não informam nada sobre o destino. Sempre faça o texto do link descrever para onde ele leva.
<!-- Avoid -->
<p>To read our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text is meaningful on its own -->
<p>Read about <a href="/pricing">our pricing plans</a>.</p>Veja Links HTML para mais práticas recomendadas sobre links.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| charset | char_encoding | Define o conjunto de caracteres de um documento vinculado. Não utilizado no HTML5. |
| coords | coordinates | Define as coordenadas de um link. Não utilizado no HTML5. |
| download | filename | Define que o destino será baixado quando um hiperlink for clicado. |
| href | URL | Define a URL do documento vinculado. |
| hreflang | language_code | Define o idioma do documento vinculado. |
| media | media_query | Define para qual mídia/dispositivo o documento vinculado é otimizado. |
| name | section_name | Define o nome de uma âncora. Não utilizado no HTML5. |
| ping | list_of_URLs | Define uma lista de URLs separadas por espaço para as quais, quando o link é seguido, requisições POST com o corpo ping serão enviadas pelo navegador (em segundo plano). Normalmente usado para rastreamento. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Define a relação entre o objeto de destino e o documento vinculado. |
| rev | text | Define um link reverso, a relação inversa do atributo "rel". Não utilizado no HTML5. |
| shape | default rect circle poly | Define a forma do hiperlink. Não utilizado no HTML5. |
| target | _blank _parent _self _top | Define onde abrir o documento vinculado. |
| type | media_type | Define o tipo de mídia no formato de um tipo MIME para a URL vinculada. |
A tag <a> também suporta os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <a>
Os links têm quatro estados que podem ser estilizados separadamente com pseudo-classes CSS. Para funcionar corretamente, devem ser escritos nesta ordem: :link, :visited, :hover, :active (lembre-se como "LoVe HAte").
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link { color: #1a73e8; } /* unvisited link */
a:visited { color: #6f42c1; } /* visited link */
a:hover { text-decoration: none; } /* on mouse-over */
a:active { color: #d93025; } /* on click */
</style>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Você também pode remover o sublinhado ou mudar a cor dos links com CSS.