HTML link: aprenda a criar e usar links em sua página HTML!

O elemento HTML link faz parte do conjunto de tags que formam os metadados do cabeçalho do documento HTML e é utilizado para acessar recursos externos da página. Na prática, a tag <link> diz ao navegador que existem recursos externos vinculados à página que podem ser utilizados no código fonte, como os estilos CSS.

Ao adicionar um arquivo de estilos à página, por exemplo, temos mais organização no código fonte HTML. E não é só isso, a tag também é usada para indicar a pessoa autora da página, versões do conteúdo em outra língua e muito mais. Para demonstrar como essa tag funciona, preparamos este conteúdo que traz os seguintes tópicos:

  • O que é a tag <link> e como usar?
  • Quais os atributos da tag <link> em HTML?
  • Qual a compatibilidade com os navegadores?

Continue conosco e boa leitura!

O elemento <link> é utilizado para vincular conteúdos de outros arquivos na página de código HTML. Ele deve ser inserido entre as tags <head>…</head> da página e é bastante utilizado para adicionar arquivos de folha de estilos CSS e favicon. Vale ressaltar que não é necessário utilizar a tag de fechamento como acontece com outros elementos HTML. Veja a sintaxe:

<head>
    <link rel="stylesheet" href="estilo.css">
</head> 

É importante não confundir o elemento <link> com o elemento <a>, que é utilizado para adicionar hiperlinks na página. Enquanto o primeiro é utilizado para vincular conteúdo ao código fonte, a tag HTML <a> direciona a pessoa usuária da aplicação para outra página ou para outra área dentro do mesmo conteúdo.

O elemento <link> contém uma série de atributos que conferem características e funcionalidades a ele. Confira as principais delas nos próximos tópicos.

Com o elemento <link>, podemos vincular um arquivo externo que esteja no mesmo domínio da página, ou até mesmo utilizar recursos de outros domínios. Neste cenário, entretanto, é necessário informar ao navegador que foi feita uma requisição que não pertence à mesma origem, ou seja, que pertence a outro domínio.

Isso porque existe uma regra de segurançautilizada pelos navegadores chamada CORS — Cross-Origin Resource Sharing — que bloqueia as requisições de domínios cruzados para oferecer mais segurança à página. Portanto, utilizamos o atributo crossorigin para que essas solicitações externas funcionem. Ele pode conter dois valores específicos:

  • anonymous: utilizado quando a requisição é solicitada sem o envio de credenciais de acesso, como certificados digitais, senhas etc;
  • use-credentials: utilizado quando a requisição é feita com o uso de credencial de acesso.

Definindo o caminho para o documento vinculado: href

Um dos principais atributos do elemento <link> é o href, que é usado para determinar a localização do arquivo acessado. Se ele estiver na mesma pasta que o documento HTML, basta informar o nome correspondente ou o diretório em que ele está. Já se estiver em outro domínio, é preciso informar a URL completa. Veja no exemplo:

<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="url-do-arquivo">

Definindo o idioma do texto do documento linkado: hreflang

O atributo hreflang é utilizado para indicar qual a linguagem do documento linkado. Seu uso é importante quando o site contém versões em várias línguas e utiliza arquivos específicos em cada uma delas.

Escolhendo em qual dispositivo mostrar o documento linkado: media

O atributo media é usado quando queremos indicar em quais dispositivos o arquivo referenciado pode ser utilizado. Algumas das possibilidades de valores são:

  • print: o arquivo será utilizado em caso de impressão da página ou na visualização de impressão;
  • screen: usado em telas de diferentes dispositivos, como notebooks, desktop, smartphones e tablets;
  • speech: utilizado em leitores de páginas;
  • all: em todos os tipos de dispositivos.

Definindo a configuração de referência ao buscar um recurso: referrerpolicy

Quando o elemento <link> utiliza recursos de outro domínio, é feita uma requisição HTTP a esse endereço. No cabeçalho dessa requisição existe um campo, chamado referer, que contém as informações sobre a URL que fez a requisição.

O atributo referrerpolicy oferece uma série de políticas de segurança possíveis para aplicação no elemento <link> com o objetivo de controlar quais informações são enviadas nessa requisição. Alguns dos valores possíveis para esse atributo são:

  • no-referrer: nenhuma referência é enviada nas requisições externas;
  • no-referrer-when-downgrade: se a requisição for para um tipo de protocolo com menos segurança, nenhuma referência será enviada. Portanto, nada será enviado se a requisição for de HTTPS para HTTP; 
  • origin: somente o domínio do site de origem será enviado;
  • origin-when-cross-origin: em solicitações externas, somente o domínio do site de origem será enviado, já se a solicitação for interna, todo o endereço será enviado;
  • unsafe-url: o endereço de origem completo será enviado em qualquer tipo de requisição.

Especificando a relação entre o documento atual e o documento vinculado(linked): rel

O atributo rel é obrigatório ao utilizar o elemento <link>, pois determina qual a relação entre o documento linkado e o atual. Esse atributo pode conter diferentes valores, por isso, confira os principais a seguir.

Alternate

Esse valor indica que o conteúdo referenciado corresponde a um documento alternativo. Um exemplo para a utilização desse valor é quando utilizamos conteúdos em linguagens diferentes, por exemplo, e queremos indicar qual a versão indicada para cada uma. Nesse cenário, ele deve ser utilizado em conjunto com o atributo hreflang para mostrar a qual linguagem o documento relacionado pertence. Veja um exemplo de código:

<link rel = “alternate” href = “http://seusite.com.br/pagina.html” hreflang = “pt-br” />
<link rel = “alternate” href = “http://seusite.com.br/es/pagina.html” hreflang = “es” />
<link rel = “alternate” href = “http://seusite.com.br/en/pagina.html? hreflang = “en” />

Author

Quando o atributo rel é indicado como author significa que o endereço relacionado é uma referência à pessoa autora do documento. Conforme o exemplo:

<link rel=”author” href=”http://endereco_do_author”>

Dns-prefetch

Ao fazer uma requisição HTTP, o navegador precisa resolver o DNS solicitado, ou seja, deve traduzir o endereço informado no atributo href para o endereço IP correspondente. Quando essas requisições são realizadas entre domínios cruzados – ou seja, feitas para origens diferentes – isso pode levar um certo tempo e, dessa forma, prejudicar o desempenho da página.

Uma forma de resolver esse problema é com a atribuição do valor dns-prefetch no atributo rel. Na prática, ele resolve o DNS antes do recurso ser solicitado. Assim, quando for necessário utilizá-lo, o acesso será mais rápido, pois a etapa de resolução de DNS já foi realizada.

Help

Quando atribuímos o valor help ao atributo rel, indicamos que a URL informada corresponde a um documento de ajuda referente à página corrente. O conteúdo pode ser a indicação de outra página ou um arquivo de texto, por exemplo.

<link rel=”help” href=”endereço-documento-de-ajuda” >

Icon

O atributo rel deve ser preenchido com o valor icon quando queremos indicar qual é o favicon da página. Falaremos sobre os tamanhos dos ícones mais adiante.

License

Caso o conteúdo do documento HTML seja protegido por direitos autorais, podemos informar o link da licença correspondente.

<link rel=”license” href=”URL-da-licenca”>

Next e prev

Os valores next e prev referentes ao atributo rel devem ser utilizados quando queremos indicar páginas sequenciais, pois isso facilita o entendimento sobre qual será a próxima página a ser carregada.

O valor next deve ser utilizado sempre na primeira página da sequência, enquanto o prev deve ser indicado na última. Entretanto, se houver páginas intermediárias, tanto o next quanto o prev devem ser informados. Veja o código de exemplo:

<!-- na primeira página -->
<link rel="next" href="pagina2.html">
<!-- na segunda página -->
<link rel="next" href="pagina3.html">
<link rel="prev" href="pagina1.html">
<!-- na última página -->
<link rel="prev" href="pagina2.html">

Pingback 

O pingback é utilizado quando existe alguma referência externa utilizada no documento. Basicamente, é feita uma comunicação para informar ao site externo que existe um vínculo entre as duas páginas.

<link rel="pingback" href="endereco-destino">

Preconnect

O preconnect funciona de forma semelhante ao dns-prefetch. A principal diferença é que enquanto o dns-prefetch apenas resolve o DNS, o preconnect faz uma conexão com o endereço. Dessa forma, há um aumento na performance ao utilizar o recurso.

Prefetch

O prefetch indica que, além de conectar no recurso externo, ele deve ser carregado e armazenado em cache para a utilização posterior.

Preload

O preload funciona de forma semelhante ao prefetch. Entretanto, a diferença entre eles é a velocidade para armazenar o recurso em cache. Enquanto o prefetch faz essa tarefa em segundo plano, o preload diz ao navegador que é preciso realizar a tarefa bem rápido, pois o conteúdo poderá ser utilizado logo ao completar o carregamento da página.

Prerender 

O prerender é utilizado quando queremos que uma página fique pré-renderizada para que a pessoa usuária da aplicação possa acessá-la com mais rapidez. Vale ressaltar que é recomendado ter cautela ao utilizar esse recurso, pois ele consome dados da internet da pessoa usuária.

O search é utilizado quando queremos implementar a pesquisa interna na página atual e as relacionadas a ela.

Stylesheet

O stylesheet é um dos valores mais comumente utilizados com o elemento <link>, pois ele tem a função de indicar que o documento relacionado corresponde a um arquivo de estilos CSS.

Definindo o tamanho do documento vinculado: sizes

O favicon pode ser configurado para ser exibido em diferentes tipos de dispositivos, pois ele pode conter diferentes formatos e tamanhos, conforme a resolução da tela e o modelo do aparelho utilizado pela pessoa usuária.

Para que o navegador decida qual arquivo deve utilizar de acordo com o dispositivo, devemos usar o atributo sizes e informar o tamanho correspondente a cada arquivo. Dessa forma, a pessoa usuária terá em seu dispositivo a imagem mais indicada.

É importante dizer que o atributo sizes só é utilizado para indicar o tamanho dos ícones. Além disso, ele pode conter dois tipos de conteúdo, são eles:

  • HeightxWidth: que indica a altura e largura do ícone;           
  • any: utilizado para imagens escaláveis, como o formato SVG.

Veja um código de exemplo:

<link rel="icon" href="favicon.png" sizes="16x16 32x32" type = "image/png"> 
<link rel="icon" href="favicon-96.png" sizes="96x96" type = "image/png">
<link rel="icon" href="favicon.svg" sizes = "any" type = "image/svg+xml">

 Definindo um documento padrão ou alternativo: title

O atributo title é utilizado para definir um nome ao recurso referenciado e, dessa forma, oferecer a possibilidade de escolha entre eles. Por exemplo, podemos adicionar vários arquivos de folha de estilo e oferecer a opção de escolha à pessoa usuária. Quando utilizado em conjunto com o atributo rel definido como alternate, o title corresponde a uma opção amigável da descrição.

<link rel="stylesheet" type="text/css" href="estilo.css" title="Estilo padrão"> 
<link rel="stylesheet alternate" type="text/css" href="estilo_alternativo.css" title="Estilo alternativo">

Definindo o tipo de mídia do documento vinculado: type

Podemos utilizar diferentes tipos de documentos vinculados pelo elemento <link>. Entretanto, é preciso especificá-los corretamente. Isso é feito com o atributo type, que pode conter diferentes especificações, conforme a lista IANA Media Types, que traz a relação dos tipos de arquivos que são usados na internet.

Qual a compatibilidade com os navegadores?

Sempre que vamos utilizar algum recurso na página, é importante verificar a compatibilidade com os navegadores. Isso porque, se algum deles não oferecer suporte, o recurso poderá causar falhas durante o acesso à página. Confira a partir de qual versão há a compatibilidade do elemento <link> com os principais navegadores:

  • Internet Explorer: 11;
  • Edge: 12;
  • Firefox: 2;
  • Chrome: 4;
  • Safari: 14;
  • Opera: 72;
  • iOS Safari: 14.2;
  • Android Browser: 81;
  • Opera Mobile: 59;
  • Chrome for Android: 87;
  • Firefox for Android: 83;
  • Samsung Internet: 13.0.

O elemento HTML link é essencial para incorporar recursos externos à página. Sua utilização ajuda a deixar o código mais organizado, pois é por ele que referenciamos os arquivos CSS. Além disso, ele oferece uma série de atributos que ajudam a adicionar funcionalidades à página, como configurar arquivos alternativos em outras línguas e oferecer diferentes opções de estilo para aplicar no conteúdo.

Gostou do nosso conteúdo sobre como usar o link em HTML? Então, confira nosso post sobre lógica de programação e veja dicas preciosas para aprender!