Avec la balise HTML <link>, vous insérez des hyperliens vers des cibles internes ou externes telles que des URLs, des médias, des fichiers ou d’autres éléments dans un texte HTML. Cela permet d’améliorer la navigabilité, d’optimiser les propriétés SEO et de favoriser l’expérience utilisateur. Pour créer des liens, on utilise également la balise <a> ainsi que d’autres attributs.
Que sont les balises de lien HTML ?
Les balises de lien HTML <a> et <link> sont utilisées pour ancrer des liens vers des ressources internes ou externes dans un document HTML. Les balises <a> permettent d’intégrer des hyperliens vers des sites Web externes ou internes, ainsi que des liens vers des fichiers, des documents et des téléchargements. Les balises <link> permettent d’intégrer des ressources telles que des feuilles de style, des polices et des icônes, ce qui améliore la fonctionnalité, la convivialité et la navigabilité au sein d’une page.
Quelle est la différence entre <a> et <link> ?
Pour intégrer des hyperliens ou des ressources externes, les deux balises HTML (en anglais tag) <a> ou <link> peuvent être utilisées, en fonction du cas. Comme elles remplissent chacune des objectifs et des fonctions différents, il convient de tenir compte de ces différences :
<a>: la balise<a>signifie « Anchor » (ancre), car elle permet d’ancrer des hyperliens vers des URL ou des images, des graphiques et des vidéos dans des pages HTML. Il peut s’agir d’éléments du même site Web ou de ressources externes.<link>: la balise HTML<link>permet avant tout d’intégrer des ressources externes telles que des feuilles de style CSS, des favicons, des documents ou des polices de caractères dans des documents HTML. Elle permet d’influencer l’apparence et le comportement de la page, ou d’optimiser son fonctionnement à l’aide de techniques comme la prélecture (prefetching en anglais) ou la déclaration d’URL canoniques.
La principale différence réside dans le fait que <a> est utilisé en priorité pour l’intégration d’hyperliens, tandis que <link> est surtout utilisé pour l’intégration d’éléments externes comme les feuilles de style. Les balises <a> sont de plus généralement intégrées dans la zone <body>, tandis que les balises <link> sont utilisées dans la zone <header>.
- 3x plus rapide, 60 % d'économie
- Haute disponibilité >99,99 %
- Seulement chez IONOS : jusqu'à 500 Go inclus
La syntaxe des balises de lien HTML expliquée
Nous allons maintenant vous expliquer la syntaxe des deux balises de lien HTML <a> et <link>.
Syntaxe de la balise <a>
Pour utiliser correctement la balise de lien <a>, vous avez besoin, en plus de la balise ouvrante <a> et de la balise fermante </a>, d’éléments supplémentaires comme :
href: avec l’attribut HTML href, vous définissez l’URL cible à laquelle vous faites référence avec la balise de lien. Il peut s’agir d’une URL absolue ou relative ou encore d’un ID d’ancrage pour la même page.- Texte du lien ou balise image : l’URL cible est intégrée comme URL relative ou absolue à l’intérieur des balises
<a>...</a>et après l’attributhref, afin d’ancrer le lien dans le texte HTML. Il en va de même pour les balises d’image<img>dans le cas des médias photo.
Autres attributs facultatifs à l’intérieur des balises <a> :
target: définit l’endroit où une URL cible doit s’ouvrir, par exemple avec_blankpour un nouvel onglet ou une nouvelle fenêtre ou avec_parentpour un cadre parent.download: détermine que les hyperliens effectuent automatiquement un téléchargement pour les ressources de type fichier.title: sert à afficher des titres ou des descriptions en rapport avec les hyperliens lorsque le curseur passe sur la zone liée.rel: définit la relation entre la page actuelle et la page liée ; par exemple,rel=nofollowpermet de définir que les moteurs de recherche ne doivent pas rechercher un hyperlien.
Exemple :
<a href="URL cible">Texte du lien ou balise d’image</a>Syntaxe de la balise <link>
Pour l’intégration de la balise HTML <link>, différentes variantes et attributs HTML doivent être pris en compte selon le but recherché :
Lier des feuilles de style
Pour intégrer des feuilles de style CSS externes et définir l’apparence d’un site Web, la syntaxe suivante est utilisée :
<link rel="stylesheet" href="styles.css">Lier les favicons
Pour afficher de petites icônes ou images (favicons) à côté des URL, la syntaxe suivante est utilisée.
<link rel="icon" href="favicon.ico">Prélecture
Pour améliorer les performances lors du chargement des sites Web, il est possible de charger des ressources en arrière-plan par prélecture. La syntaxe suivante est utilisée à cet effet :
<link rel="prefetch" href="page suivante.html">URL Canonical ou balises
En créant des liens avec des URL ou des balises canoniques, vous pouvez indiquer aux moteurs de recherche l’URL à privilégier lorsque différentes URL renvoient à la même page :
<link rel="canonical" href="https://exemple-url/canonical-url">Lier des URL alternatives
Si différentes versions du même site Web sont disponibles, par exemple dans différentes langues, il est possible de les lier comme suit :
<link rel="alternate" href="alternative-url.html" type="text/html" hreflang="fr">Découvrez notre tutoriel HTML pour débutants pour en apprendre plus sur ce langage de programmation populaire.
Quelles sont les utilisations couvertes par les balises de lien HTML ?
Les domaines d’application courants des balises de lien HTML sont les suivants :
- Amélioration de la navigation grâce à des menus et des barres de navigation intégrés
- Liens et intégration d’hyperliens vers des URL ou des ressources internes ou externes
- Téléchargements de documents et de fichiers
- Liens vers des sous-pages internes pertinentes grâce à des liens d’ancrage
- Accessibilité et optimisation pour les moteurs de recherche
- Amélioration des temps de chargement et des performances des sites Web
- 1 certificat SSL Wildcard par contrat
- Fonction incluse Domain Connect pour une configuration DNS simplifiée