Tag HTML <link>
Neste artigo, abordaremos o link da tag com exemplos . O objetivo é atender aos requisitos de aprendizagem.
A tag HTML <link> é usada para vincular recursos externos, como folhas de estilo, ícones e outros documentos, a um documento HTML
Um link para uma folha de estilo externa é fornecido aqui:
Example:
Aqui, um exemplo da tag de link dentro da tag de cabeçalho style.css define como o navegador deve estilizar os elementos da página da web e os links para os artigos anteriores e posteriores:
Example:
Uso de link de marca
Um link Tag <link> indica a conexão entre o documento atual e um recurso externo.
A tag <link> é comumente aplicada para vincular a folhas de estilo externas.
O único conteúdo de um link são seus atributos. Caso contrário, é um elemento vazio .
Aqui estão alguns casos de uso comuns para a tag <link> :
- O uso mais comum da tag <link> é vincular uma folha de estilo externa a um documento HTML. Isso permite definir estilos em um arquivo separado e aplicá-los a várias páginas em um site. Isso pode ajudar a manter a consistência no design e facilitar a atualização dos estilos em todo o site.
- A tag <link> também pode ser usada para vincular arquivos de ícone, como arquivos favicon.ico que aparecem na barra de endereço do navegador ou em guias. Isso pode ajudar a aprimorar a marca e a identidade visual do seu site.
- A tag <link> pode ser usada para vincular outros documentos, como arquivos XML ou feeds RSS. Isso pode permitir que os usuários acessem conteúdo ou dados adicionais relacionados ao seu site.
- A tag <link> também pode ser usada para vincular scripts externos, como arquivos JavaScript. Isso pode permitir que você adicione funcionalidades ao seu site, como interatividade ou conteúdo dinâmico.
- A tag <link> pode ser usada para especificar a relação entre o documento atual e outro documento, como uma versão de idioma alternativo ou uma versão móvel. Isso pode ajudar os mecanismos de pesquisa a indexar e classificar seu site com mais eficiência.
Lista de Atributos
Atributo | Valor | Visão geral |
---|---|---|
tipo | tipo de mídia |
Indique o tipo de mídia do documento vinculado. |
rele | autor alternativo dns-pré-busca ícone de ajuda licença próximo pingback pré-conexão pré- busca pré-carregamento pré -processamento folha de estilo de pesquisa anterior |
É necessário. Fornece detalhes sobre a relação entre o documento atual e seu documento vinculado. |
título |
Fornece uma folha de estilo recomendada ou alternativa. |
|
origem cruzada | credenciais de uso anônimas |
Fornece instruções sobre como lidar com solicitações de origens cruzadas. |
href | URL |
Fornece a URL do documento vinculado. |
hreflang | language_code |
Inclui informações sobre o idioma do documento vinculado. |
meios de comunicação | media_query |
Indica o dispositivo no qual o documento vinculado será renderizado. |
política de referência | no-referrer no-referrer-quando-downgrade origem origem-quando-origem cruzada url inseguro |
Fornece o referenciador a ser usado ao buscar o recurso. |
tamanhos | Altura x Largura qualquer |
Define o tamanho do recurso vinculado. Apenas para rel=”icon” |
Atributos
Global
Tag link <link> também pode aceitar Atributos Globais em HTML.
Evento
Tag link <link> também pode aceitar Atributos de Evento em HTML.
Compatibilidade do navegador
A maioria dos navegadores é compatível com o link de tag quando usado para folhas de estilo. Fora isso, nada mais é suportado.
Elemento | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<link> | Sim | Sim | Sim | Sim | Sim |
CSS predefinido
Em muitos navegadores, o elemento <link> aparecerá com os seguintes valores padrão:
link { display: none; }
Vantagens da tag HTML <link>
A tag HTML <link> oferece várias vantagens para desenvolvedores da Web, incluindo:
- A tag <link> permite separar a apresentação de sua página web (estilos, ícones, etc.) de seu conteúdo. Isso pode facilitar a manutenção e atualização do seu site, pois as alterações na apresentação podem ser feitas independentemente do conteúdo.
- Ao vincular recursos externos usando a tag <link> , você pode reduzir o tamanho do seu documento HTML e melhorar o tempo de carregamento da página. Isso ocorre porque os recursos vinculados são carregados separadamente e podem ser armazenados em cache pelo navegador para acesso mais rápido no futuro.
- A tag <link> pode ser usada para vincular scripts externos, como arquivos JavaScript, que podem adicionar interatividade e conteúdo dinâmico à sua página da web. Isso pode ajudar a criar uma experiência de usuário mais envolvente para seus visitantes.
- A tag <link> pode ser usada para especificar a relação entre o documento atual e outro documento, como uma versão de idioma alternativo ou uma versão móvel. Isso pode ajudar os usuários a navegar em seu site com mais facilidade, principalmente se estiverem usando tecnologias assistivas.
- A tag <link> pode ser usada para fornecer metadados sobre seu site, como autor, palavras-chave e descrição. Isso pode ajudar os mecanismos de pesquisa a indexar e classificar seu site com mais eficiência e melhorar sua visibilidade nos resultados de pesquisa.