Com a tag <link> em HTML, você cria hyperlinks para URLs, diversos tipos de mídia e arquivos. O uso de links internos e externos ajuda a melhorar a navegação, o desempenho de SEO e a experiência geral do usuário. Além da tag <link>, você também pode usar a tag <a> combinada com outros atributos para configurar 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 hyperlinks para sites externos ou internos, bem como links para arquivos, documentos e downloads. Já a tag <link> é usada para incluir recursos, como folhas de estilo, fontes e ícones, que aprimoram a funcionalidade, usabilidade e navegação de uma página web.

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

Ao criar hyperlinks para outras páginas web ou adicionar recursos externos, é uma abordagem comum usar as tags HTML <a> ou <link>, dependendo de qual link você deseja definir. Estas são as diferenças entre as duas tags:

  • <a>: A tag <a> (âncora) é usada para criar hyperlinks para URLs ou diferentes 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 principalmente para integrar recursos externos, como folhas de estilo CSS, favicons, documentos ou fontes, a um documento HTML. Ela ajuda a controlar a aparência e o comportamento da página e, com recursos como URLs canônicos e pré-busca (prefetching), também pode melhorar seu desempenho.

A principal diferença entre as duas opções é que a tag <a> é mais usada para incorporar hyperlinks, 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>.

Hospedagem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o desempenho com um clique à medida que o tráfego cresce
  • Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana

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> corretamente, você precisa definir alguns elementos adicionais:

  • 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 informaçõ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 automaticamente 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 mecanismos 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 diferentes atributos HTML juntamente 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 previamente em segundo plano e melhorar o desempenho 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 mecanismos de busca qual URL deve ser priorizado, use o seguinte código:

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

Vincular URLs alternativos

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

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

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 integrados e barras de navegação
  • Incorporar e apontar para URLs ou recursos internos ou externos
  • Efetuar o download de documentos e arquivos
  • Apontar para páginas internas por meio de links de âncora
  • Aprimorar a acessibilidade e a otimização para mecanismos de busca
  • Melhorar o carregamento e o desempenho do site
Construa sua marca com um ótimo domínio
Registre um nome de domínio
  • SSL Wildcard grátis para mais segurança
  • Registro privado grátis para mais privacidade
  • Domain Connect grátis para configurar DNS fácil
Este artigo foi útil?
Ir para o menu principal