Em HTML, a tag link é um elemento de fechamento automático, geralmente localizado na seção head do documento. É utilizado para estabelecer associações com recursos externos, como folhas de estilo, ícones, etc. A tag link possui vários atributos, dos quais rel e href são os mais comumente usados.
O atributo rel define o relacionamento entre o documento atual e o recurso vinculado. Os valores comuns dos atributos rel são:
stylesheet : representa um link para uma folha de estilo CSS externa. icon : representa um ícone vinculado a um site, como um favicon. O atributo href é usado para especificar a URL do recurso vinculado.
Um exemplo típico de tag de link é:
<!DOCTYPEhtml> <html> <cabeça> <meta charset="UTF-8"> <title>Meu site</title> <!-- Link para folha de estilo CSS externa --> <link rel="stylesheet" href="styles.css"> <!-- Link para o ícone do site --> <link rel="icon" href="favicon.ico"> </head> <corpo> <h1>Link!</h1> <p>Esta é uma introdução ao link. </p> </body> </html>
Neste exemplo, usamos duas tags link . A primeira tag link associa o documento HTML à folha de estilo CSS externa styles.css , que é usada para definir o estilo da página. A segunda tag link associa o documento HTML ao site favicon.ico , que será exibido quando o usuário abrir o site em um navegador.
Claro, a tag link tem outros atributos e usos. Aqui estão alguns atributos e casos de uso comuns:
type : este atributo é usado para especificar o tipo MIME do recurso vinculado. Por exemplo, ao vincular a uma folha de estilo CSS, você pode especificar seu tipo como text/css . Na maioria dos casos, os navegadores podem identificar automaticamente os tipos de recursos, portanto o atributo type não é obrigatório. Exemplo:
<link rel="stylesheet" href="styles.css" type="text/css">
media : Este atributo permite especificar a quais tipos de mídia a folha de estilo se aplica. Por exemplo, você pode criar uma folha de estilo específica de impressão que será usada quando os usuários imprimirem uma página. Exemplo:
<link rel="stylesheet" href="print.css" media="print">
sizes : ao usar a tag link para vincular ícones de vários tamanhos, você pode usar sizes para especificar o tamanho do ícone. Isto é útil para situações em que os ícones são exibidos em tamanhos diferentes dependendo do dispositivo. Exemplo:
<link rel="icon" href="icon-48x48.png" tamanhos="48x48"> <link rel="icon" href="icon-96x96.png" tamanhos="96x96">
crossorigin : ao vincular a um recurso de origem cruzada, você pode usar crossorigin para especificar as configurações de CORS (Cross-Origin Resource Sharing) para o recurso. Exemplo:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : Este atributo é utilizado para garantir a integridade de recursos externos e pode ser utilizado em conjunto com o atributo crossorigin . Ao fornecer ao recurso um hash baseado em conteúdo (como SHA-256), você pode garantir que o recurso não foi adulterado. Exemplo:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" integridade="sha256-base64-encoded-hash">
preload : rel="preload" pode ser usado para carregar recursos importantes antecipadamente, como fontes, imagens ou scripts. Isso otimiza o desempenho de carregamento da página. Exemplo:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Estes são alguns atributos e usos comuns link .
Além do mencionado anteriormente, rel possui mais valores de atributos:
alternate : Use rel="alternate" para fornecer versões alternativas do documento, como páginas em um idioma diferente ou para dispositivos diferentes. Exemplo:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="somente tela e (largura máxima: 640px)" href="https://link.com/mobile/a">
dns-prefetch : Os nomes de domínio podem ser pré-resolvidos por meio de rel="dns-prefetch" para reduzir o tempo de pesquisa de DNS e acelerar o carregamento de recursos. Exemplo:
<link rel="dns-prefetch" href="//link.com">
preconnect : semelhante a dns-prefetch , rel="preconnect" pode pré-estabelecer uma conexão TCP com um recurso de terceiros, reduzindo o tempo necessário para estabelecer uma conexão. Exemplo:
<link rel="preconnect" href="https://link.com">
prefetch : Use rel="prefetch" para pré-buscar e armazenar recursos em cache para uso em páginas subsequentes. Isto é útil para pré-carregar recursos que podem ser usados na página. Exemplo:
<link rel="prefetch" href="pre-page.html">
canonical : usar rel="canonical" pode fornecer aos mecanismos de pesquisa o URL canônico de uma página, ajudando a evitar problemas de conteúdo duplicado. Exemplo:
<link rel="canonical" href="https://link.com/a/post">
license : Use rel="license" para especificar o URL da licença do documento. Exemplo:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : Use rel="manifest" para vincular o arquivo de manifesto de um aplicativo da web (geralmente no formato JSON) a um documento HTML. O arquivo manifesto contém os metadados da aplicação web, como nome, descrição, ícone, etc. Exemplo:
<link rel="manifest" href="manifest.json">
Observe que diferentes navegadores podem ter diferentes graus de suporte para essas propriedades e funcionalidades. Recomenda-se consultar a documentação relevante ao utilizar novos recursos para garantir compatibilidade e funcionalidade.
Isso conclui este artigo sobre o uso específico do atributo link tag em HTML. Para obter mais informações sobre o atributo link tag HTML, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. o futuro.downcodes.com!