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 que é a tag <link> e como usar?
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.
Quais os atributos da tag <link> em HTML?
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.
Especificar como o link lida com requisições de origem cruzada: crossorigin
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.
Search
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!
