Com a tag <link> em HTML, você cria hy­per­links para URLs, diversos tipos de mídia e arquivos. O uso de links internos e externos ajuda a melhorar a navegação, o de­sem­pe­nho de SEO e a ex­pe­ri­ên­cia geral do usuário. Além da tag <link>, você também pode usar a tag <a> combinada com outros atributos para con­fi­gu­rar seus links.

O que é link HTML?

As tags HTML <a> e <link> são usadas para conectar recursos internos ou externos a um documento HTML. A tag <a> permite adicionar hy­per­links para sites externos ou internos, bem como links para arquivos, do­cu­men­tos e downloads. Já a tag <link> é usada para incluir recursos, como folhas de estilo, fontes e ícones, que aprimoram a fun­ci­o­na­li­dade, usa­bi­li­dade e navegação de uma página web.

Qual é a diferença entre as tags <a> e <link>?

Ao criar hy­per­links para outras páginas web ou adicionar recursos externos, é uma abordagem comum usar as tags HTML <a> ou <link>, de­pen­dendo de qual link você deseja definir. Estas são as di­fe­ren­ças entre as duas tags:

  • <a>: A tag <a> (âncora) é usada para criar hy­per­links para URLs ou di­fe­ren­tes tipos de mídia (como imagens, gráficos e vídeos). Esses links podem apontar para elementos do mesmo site ou recursos externos.
  • <link>: A tag <link> é usada prin­ci­pal­mente para integrar recursos externos, como folhas de estilo CSS, favicons, do­cu­men­tos ou fontes, a um documento HTML. Ela ajuda a controlar a aparência e o com­por­ta­mento da página e, com recursos como URLs canônicos e pré-busca (pre­fet­ching), também pode melhorar seu de­sem­pe­nho.

A principal diferença entre as duas opções é que a tag <a> é mais usada para in­cor­po­rar hy­per­links, enquanto <link> serve para incluir elementos externos, como folhas de estilo. As tags <a> também costumam aparecer na seção <body> do documento, enquanto as tags <link> ficam na seção <head>.

Web hosting
Get your site online fast without breaking the bank
  • Fast page loads while cutting costs by 60%
  • Keep your site open 24/7 with 99.99% uptime
  • Never run out of space with unlimited storage

Qual é a sintaxe de um link HTML?

Nesta seção, vamos conhecer a sintaxe das tags <a> e <link>.

Sintaxe da tag <a> em HTML

Para usar a tag <a> cor­re­ta­mente, você precisa definir alguns elementos adi­ci­o­nais:

  • href: O atributo HTML href define para qual URL o link deve apontar. Você pode escolher entre um URL absoluto ou relativo ou até mesmo criar um link de âncora para in­for­ma­ções na mesma página.
  • Texto do link ou tag de imagem: A tag de abertura é seguida pelo texto do link, que é o texto clicável exibido aos usuários na página. Se o link apontar para uma imagem, será preciso usar uma tag de imagem.

Outros atributos que podem ser usados com a tag <a> incluem:

  • target: Determina como a página será aberta. Por exemplo, use _blank para abri-la em uma nova aba ou janela ou _parent para abrir uma janela mãe.
  • download: Inicia au­to­ma­ti­ca­mente um download quando o usuário clica no link.
  • title: Exibe um título, dica ou descrição ao passar o mouse sobre o link.
  • rel: Define a relação entre a página atual e a página vinculada (por exemplo, rel=nofollow informa aos me­ca­nis­mos de busca para não seguirem o link).

Exemplo:

<a href="target-url">texto do link ou tag de imagem</a>
html

Sintaxe da tag <link> em HTML

A tag <link> em HTML é versátil. Você pode usar di­fe­ren­tes atributos HTML jun­ta­mente com a tag <link> para obter o resultado desejado.

Vincular folhas de estilo

Se quiser incluir folhas de estilo CSS externas, use a sintaxe abaixo:

<link rel="stylesheet" href="styles.css">
html

Vincular favicons

Use a sintaxe a seguir para exibir pequenos ícones ou imagens (favicons) ao lado dos URLs:

<link rel="icon" href="favicon.ico">
html

Pré-busca

Para carregar recursos pre­vi­a­mente em segundo plano e melhorar o de­sem­pe­nho do site, use esta sintaxe:

<link rel="prefetch" href="proxima-pagina.html">
html

URLs ou tags canônicas

Se você tem múltiplos URLs que levam ao mesmo conteúdo e deseja informar aos me­ca­nis­mos de busca qual URL deve ser pri­o­ri­zado, use o seguinte código:

<link rel="canonical" href="https://exemplo-url/url-canonico">
html

Vincular URLs al­ter­na­ti­vos

Se você tem di­fe­ren­tes versões da mesma página (por exemplo, em di­fe­ren­tes idiomas), você pode vinculá-las assim:

<link rel="alternate" href="url-alternativo.html" type="text/html" title="página alternativa">
html
Dica

Confira o nosso tutorial de HTML para ini­ci­an­tes para saber mais sobre essa popular linguagem de marcação.

Por que usar links HTML?

Estas são algumas opções de uso das tags de link em HTML:

  • Melhorar a navegação com menus in­te­gra­dos e barras de navegação
  • In­cor­po­rar e apontar para URLs ou recursos internos ou externos
  • Efetuar o download de do­cu­men­tos e arquivos
  • Apontar para páginas internas por meio de links de âncora
  • Aprimorar a aces­si­bi­li­dade e a oti­mi­za­ção para me­ca­nis­mos de busca
  • Melhorar o car­re­ga­mento e o de­sem­pe­nho do site
Construa sua marca com um ótimo domínio
Registre um nome de domínio
  • SSL Wildcard grátis para mais segurança
  • Domain Connect grátis para con­fi­gu­rar DNS fácil
Ir para o menu principal