En HTML, la balise link est un élément à fermeture automatique, généralement situé dans head du document. Il permet d'établir des associations avec des ressources externes, comme des feuilles de style, des icônes, etc. La balise link possède plusieurs attributs, parmi lesquels rel et href sont les plus couramment utilisés.
L'attribut rel définit la relation entre le document actuel et la ressource liée. Les valeurs courantes de l'attribut rel sont :
stylesheet : Représente un lien vers une feuille de style CSS externe. icon : représente une icône liée à un site internet, comme un favicon. L'attribut href est utilisé pour spécifier l'URL de la ressource liée.
Un exemple typique de balise link est :
<!DOCTYPEhtml> <html> <tête> <méta charset="UTF-8"> <title>Mon site Web</title> <!-- Lien vers une feuille de style CSS externe --> <link rel="stylesheet" href="styles.css"> <!-- Lien vers l'icône du site --> <link rel="icon" href="favicon.ico"> </tête> <corps> <h1>Lien !</h1> <p>Ceci est une introduction au lien. </p> </corps> </html>
Dans cet exemple, nous utilisons deux balises link . La première balise link associe le document HTML à la feuille de style CSS externe styles.css , qui sert à définir le style de la page. La deuxième balise link associe le document HTML au site Web favicon.ico , qui sera affiché lorsque l'utilisateur ouvrira le site Web dans un navigateur.
Bien entendu, la balise link a d’autres attributs et utilisations. Voici quelques attributs et cas d’utilisation courants :
type : Cet attribut est utilisé pour spécifier le type MIME de la ressource liée. Par exemple, lors d'un lien vers une feuille de style CSS, vous pouvez spécifier son type comme text/css . Dans la plupart des cas, les navigateurs peuvent identifier automatiquement les types de ressources, l'attribut type n'est donc pas requis. Exemple:
<link rel="stylesheet" href="styles.css" type="text/css">
media : Cet attribut vous permet de spécifier à quels types de médias la feuille de style s'applique. Par exemple, vous pouvez créer une feuille de style spécifique à l'impression qui est utilisée lorsque les utilisateurs impriment une page. Exemple:
<link rel="stylesheet" href="print.css" media="print">
sizes : lorsque vous utilisez la balise link pour créer un lien vers des icônes de plusieurs tailles, vous pouvez utiliser sizes pour spécifier la taille de l'icône. Ceci est utile dans les situations où les icônes sont affichées dans des tailles différentes selon l'appareil. Exemple:
<link rel="icon" href="icon-48x48.png" tailles="48x48"> <link rel="icon" href="icon-96x96.png" tailles="96x96">
crossorigin : lors de la création d'un lien vers une ressource d'origine croisée, vous pouvez utiliser crossorigin pour spécifier les paramètres CORS (Cross-Origin Resource Sharing) de la ressource. Exemple:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : cet attribut est utilisé pour garantir l'intégrité des ressources externes et peut être utilisé avec l'attribut crossorigin . En attribuant à la ressource un hachage basé sur le contenu (tel que SHA-256), vous pouvez vous assurer que la ressource n'a pas été falsifiée. Exemple:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" Integrity="sha256-base64-encoded-hash">
preload : rel="preload" peut être utilisé pour charger à l'avance des ressources importantes, telles que des polices, des images ou des scripts. Cela optimise les performances de chargement des pages. Exemple:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Voici quelques attributs et utilisations courants de link .
En plus de celles mentionnées précédemment, rel a plus de valeurs d'attribut :
alternate : utilisez rel="alternate" pour fournir des versions alternatives du document, telles que des pages dans une langue différente ou pour différents appareils. Exemple:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="écran uniquement et (largeur maximale : 640 px)" href="https://link.com/mobile/a">
dns-prefetch : les noms de domaine peuvent être pré-résolus via rel="dns-prefetch" pour réduire le temps de recherche DNS et accélérer le chargement des ressources. Exemple:
<link rel="dns-prefetch" href="//link.com">
preconnect : Semblable à dns-prefetch , rel="preconnect" peut pré-établir une connexion TCP à une ressource tierce, réduisant ainsi le temps nécessaire pour établir une connexion. Exemple:
<link rel="preconnect" href="https://link.com">
prefetch : utilisez rel="prefetch" pour pré-récupérer et mettre en cache les ressources à utiliser dans les pages suivantes. Ceci est utile pour précharger les ressources qui peuvent être utilisées dans la page. Exemple:
<link rel="prefetch" href="pre-page.html">
canonical : L'utilisation de rel="canonical" peut fournir aux moteurs de recherche l'URL canonique d'une page, aidant ainsi à éviter les problèmes de contenu en double. Exemple:
<link rel="canonical" href="https://link.com/a/post">
license : Utilisez rel="license" pour spécifier l'URL de licence du document. Exemple:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : utilisez rel="manifest" pour lier le fichier manifeste d'une application Web (généralement au format JSON) à un document HTML. Le fichier manifeste contient les métadonnées de l'application Web, telles que le nom, la description, l'icône, etc. Exemple:
<link rel="manifest" href="manifest.json">
Veuillez noter que différents navigateurs peuvent avoir différents degrés de prise en charge de ces propriétés et fonctionnalités. Il est recommandé de consulter la documentation pertinente lors de l'utilisation de nouvelles fonctionnalités pour garantir la compatibilité et la fonctionnalité.
Ceci conclut cet article sur l'utilisation spécifique de l'attribut de balise de lien en HTML. Pour plus d'informations sur l'attribut de balise de lien HTML, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. l'avenir.downcodes.com!