Outils HTML

Gratuit Generateur HTML link rel

Générez des balises link pour preload, preconnect, dns-prefetch, canonical et alternate.

Chargement de l'outil...

Qu'est-ce que Generateur HTML link rel ?

Une balise link HTML connecte une page a une autre ressource ou declare une relation dans l'en-tete du document. Les developpeurs utilisent les balises link pour les URLs canoniques, les alternatives linguistiques, les icones, les indications de prechargement, les indications de preconnexion, les feuilles de style, et plus encore. Cet outil aide a maintenir les attributs comme as, type, href et crossorigin au bon endroit.

Réponse rapide

Creez des balises link HTML valides pour preload, preconnect, dns-prefetch, canonical et URLs alternatives sans deviner les attributs requis. Chaque valeur rel a des exigences specifiques comme as, type ou crossorigin.

Last updated: 2026-06-11

Limites

  • L'attribut as est obligatoire pour les liens preload. Sans lui, le navigateur ne peut pas prioriser ou appliquer la politique de securite de contenu appropriee a la ressource prechargee.
  • Precharger trop de ressources est contre-productif et peut retarder le chargement du contenu critique reel. Limitez les indications preload a une a trois ressources importantes par page.
  • L'attribut crossorigin est obligatoire pour le prechargement des polices et autres ressources multi-origines. Son omission entraine le rejet du prechargement par le navigateur.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez la valeur rel qui correspond a la relation ou a l'indication de navigateur dont vous avez besoin.
  2. Saisissez le chemin href ou l'URL.
  3. Ajoutez as, type et crossorigin uniquement lorsqu'ils s'appliquent a la valeur rel selectionnee.
  4. Copiez la balise generee dans la section head de votre HTML.

A quoi il sert

  • Creer une balise preload pour une police, un script, une image ou une feuille de style.
  • Ajouter preconnect ou dns-prefetch pour des origines tierces.
  • Construire des balises link sans oublier les attributs as, type ou crossorigin.

Cas d'usage

Exemples concrets

Exemple

Precharger une feuille de style critique

Un petit site a un fichier CSS critique. L'outil peut generer une balise preload avec les attributs rel, href, as et type corrects.

Exemple

Preconnexion a un hebergeur de polices

Une page utilise un fournisseur de polices tiers. Une balise preconnect peut preparer la connexion du navigateur avant que le fichier de police ne soit demande.

Erreurs frequentes

  • Precharger trop de ressources.
  • Utiliser preload sans l'attribut as correct.
  • Ajouter preconnect a des domaines qui ne sont pas utilises sur la page.

Vérification

  1. Inspectez la balise link generee dans le panneau Elements des outils de developpement du navigateur pour confirmer que tous les attributs requis sont presents pour la valeur rel selectionnee.
  2. Ouvrez le panneau Reseau et verifiez que les ressources prechargees apparaissent avec l'indicateur de priorite correct et ne sont pas dupliquees en tant que requetes ulterieures.

FAQ

Questions sur Generateur HTML link rel

Quand dois-je utiliser preload ?

Utilisez preload pour un petit nombre de ressources critiques dont le navigateur a besoin tot. Ne prechargez pas chaque image, script ou feuille de style.

A quoi sert l'attribut as ?

L'attribut as indique au navigateur le type de ressource en cours de prechargement, comme style, script, font, image ou fetch.

Les balises preconnect ameliorent-elles chaque page ?

Non. Preconnect est utile pour les origines tierces importantes. Des balises preconnect supplementaires peuvent gaspiller les ressources du navigateur.

Quand dois-je utiliser preload au lieu d'un script ou style inline ?

Utilisez preload lorsqu'une ressource est critique mais ne peut pas etre integree en ligne, comme un fichier de police volumineux ou une image hero. Les scripts et styles inline sont meilleurs pour le code critique de petite taille car ils eliminent une requete reseau supplementaire.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi