Avec la balise HTML <link>, vous insérez des hy­per­liens 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 na­vi­ga­bi­lité, d’optimiser les pro­prié­tés SEO et de favoriser l’ex­pé­rience uti­li­sa­teur. 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 res­sources internes ou externes dans un document HTML. Les balises <a> per­met­tent d’intégrer des hy­per­liens vers des sites Web externes ou internes, ainsi que des liens vers des fichiers, des documents et des té­lé­char­ge­ments. Les balises <link> per­met­tent d’intégrer des res­sources telles que des feuilles de style, des polices et des icônes, ce qui améliore la fonc­tion­na­lité, la con­vi­via­lité et la na­vi­ga­bi­lité au sein d’une page.

Quelle est la dif­fé­rence entre <a> et <link> ?

Pour intégrer des hy­per­liens ou des res­sources externes, les deux balises HTML (en anglais tag) <a> ou <link> peuvent être utilisées, en fonction du cas. Comme elles rem­plis­sent chacune des objectifs et des fonctions dif­fé­rents, il convient de tenir compte de ces dif­fé­rences :

  • <a> : la balise <a> signifie « Anchor » (ancre), car elle permet d’ancrer des hy­per­liens vers des URL ou des images, des gra­phiques et des vidéos dans des pages HTML. Il peut s’agir d’éléments du même site Web ou de res­sources externes.
  • <link> : la balise HTML <link> permet avant tout d’intégrer des res­sources externes telles que des feuilles de style CSS, des favicons, des documents ou des polices de ca­rac­tères dans des documents HTML. Elle permet d’in­fluen­cer l’apparence et le com­por­te­ment de la page, ou d’optimiser son fonc­tion­ne­ment à l’aide de tech­niques comme la pré­lec­ture (pre­fet­ching en anglais) ou la dé­cla­ra­tion d’URL ca­no­niques.

La prin­ci­pale dif­fé­rence réside dans le fait que <a> est utilisé en priorité pour l’in­té­gra­tion d’hy­per­liens, tandis que <link> est surtout utilisé pour l’in­té­gra­tion d’éléments externes comme les feuilles de style. Les balises <a> sont de plus gé­né­ra­le­ment intégrées dans la zone <body>, tandis que les balises <link> sont utilisées dans la zone <header>.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

La syntaxe des balises de lien HTML expliquée

Nous allons main­te­nant vous expliquer la syntaxe des deux balises de lien HTML <a> et <link>.

Syntaxe de la balise <a>

Pour utiliser cor­rec­te­ment la balise de lien <a>, vous avez besoin, en plus de la balise ouvrante <a> et de la balise fermante </a>, d’éléments sup­plé­men­taires comme :

  • href : avec l’attribut HTML href, vous dé­fi­nis­sez 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’attribut href, 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 fa­cul­ta­tifs à l’intérieur des balises <a> :

  • target : définit l’endroit où une URL cible doit s’ouvrir, par exemple avec _blank pour un nouvel onglet ou une nouvelle fenêtre ou avec _parent pour un cadre parent.
  • download : détermine que les hy­per­liens ef­fec­tuent au­to­ma­ti­que­ment un té­lé­char­ge­ment pour les res­sources de type fichier.
  • title : sert à afficher des titres ou des des­crip­tions en rapport avec les hy­per­liens 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=nofollow permet de définir que les moteurs de recherche ne doivent pas re­cher­cher un hyperlien.

Exemple :

<a href="URL cible">Texte du lien ou balise d’image</a>
html

Syntaxe de la balise <link>

Pour l’in­té­gra­tion de la balise HTML <link>, dif­fé­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">
html

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">
html

Pré­lec­ture

Pour améliorer les per­for­mances lors du char­ge­ment des sites Web, il est possible de charger des res­sources en arrière-plan par pré­lec­ture. La syntaxe suivante est utilisée à cet effet :

<link rel="prefetch" href="page suivante.html">
html

URL Canonical ou balises

En créant des liens avec des URL ou des balises ca­no­niques, vous pouvez indiquer aux moteurs de recherche l’URL à pri­vi­lé­gier lorsque dif­fé­rentes URL renvoient à la même page :

<link rel="canonical" href="https://exemple-url/canonical-url">
html

Lier des URL al­ter­na­tives

Si dif­fé­rentes versions du même site Web sont dis­po­nibles, par exemple dans dif­fé­rentes langues, il est possible de les lier comme suit :

<link rel="alternate" href="alternative-url.html" type="text/html" hreflang="fr">
html
Conseil

Découvrez notre tutoriel HTML pour débutants pour en apprendre plus sur ce langage de pro­gram­ma­tion populaire.

Quelles sont les uti­li­sa­tions couvertes par les balises de lien HTML ?

Les domaines d’ap­pli­ca­tion courants des balises de lien HTML sont les suivants :

  • Amé­lio­ra­tion de la na­vi­ga­tion grâce à des menus et des barres de na­vi­ga­tion intégrés
  • Liens et in­té­gra­tion d’hy­per­liens vers des URL ou des res­sources internes ou externes
  • Té­lé­char­ge­ments de documents et de fichiers
  • Liens vers des sous-pages internes per­ti­nentes grâce à des liens d’ancrage
  • Ac­ces­si­bi­lité et op­ti­mi­sa­tion pour les moteurs de recherche
  • Amé­lio­ra­tion des temps de char­ge­ment et des per­for­mances des sites Web
Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée
Aller au menu principal