jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Free HTML Link Rel Generator

Choose a rel value, add attributes, and copy a valid link tag for the HTML head.

Loading tool...

What is HTML Link Rel Generator?

An HTML link tag connects a page to another resource or declares a relationship in the document head. Developers use link tags for canonical URLs, language alternates, icons, preload hints, preconnect hints, stylesheets, and more. This tool helps keep attributes such as as, type, href, and crossorigin in the right place.

quickAnswer

Create valid HTML link tags for preload, preconnect, dns-prefetch, canonical, and alternate URLs without guessing the required attributes. Each rel value has specific requirements such as as, type, or crossorigin.

Last updated: 2026-06-11

limitations

  • The as attribute is required for preload links. Without it, the browser cannot prioritize or apply the correct Content Security Policy to the preloaded resource.
  • Preloading too many resources is counterproductive and can delay the loading of real critical content. Limit preload hints to one to three important resources per page.
  • The crossorigin attribute is required for preloading fonts and other cross-origin resources. Omitting it causes the preload to be discarded by the browser.

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

How to use this tool

  1. Choose the rel value that matches the relationship or browser hint you need.
  2. Enter the href path or URL.
  3. Add as, type, and crossorigin only when they apply to the selected rel value.
  4. Copy the generated tag into the head section of your HTML.

What you can use it for

  • Create a preload tag for a font, script, image, or stylesheet.
  • Add preconnect or dns-prefetch for third-party origins.
  • Build link tags without forgetting as, type, or crossorigin attributes.

Use cases

Practical examples

example

Preload a key stylesheet

A small site has a critical CSS file. The tool can generate a preload tag with the correct rel, href, as, and type attributes.

example

Preconnect to a font host

A page uses a third-party font provider. A preconnect tag can prepare the browser connection before the font file is requested.

Common mistakes

  • Preloading too many resources.
  • Using preload without the correct as attribute.
  • Adding preconnect to domains that are not used on the page.

verification

  1. Inspect the generated link tag in the browser DevTools Elements panel to confirm that all required attributes are present for the selected rel value.
  2. Open the Network panel and verify preloaded resources appear with the correct priority indicator and are not duplicated as later requests.

FAQ

Questions about HTML Link Rel Generator

When should I use preload?

Use preload for a small number of critical resources that the browser needs early. Do not preload every image, script, or stylesheet.

What does the as attribute do?

The as attribute tells the browser what type of resource is being preloaded, such as style, script, font, image, or fetch.

Do preconnect tags improve every page?

No. Preconnect is useful for important third-party origins. Extra preconnect tags can waste browser resources.

When should I use preload instead of an inline script or style?

Use preload when a resource is critical but cannot be inlined, such as a large font file or a hero image. Inline scripts and styles are better for small critical-path code because they eliminate an extra network request.

Related tools

More html tools

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool

Also try

Also try

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool