The <link> Element

Key points

What a link element means

In HTML, links describe connections between pages or between a page and another file. Use a, for example, to make a link a person can click to go somewhere. The link element usually tells the browser to load a file or learn how a page is related to another page.

link has no contents and no end tag. Most types go inside head. Some stylesheets and early-fetch hints can also go in body when their conditions are met.

Category	Examples	Processing
Hyperlink (a link a person can follow)	alternate, canonical, help, next	Describes a connection to another page. It does not have to show clickable text in the current page.
External file link	stylesheet, icon, preload, modulepreload	The browser fetches another file and uses it for the purpose named by the type.
Early-fetch hint	preconnect, dns-prefetch, prefetch	Suggests preparing a connection or a file early. Whether and when it runs depends on the type and browser.

A rel attribute can contain multiple space-separated keywords. Their effects may combine, but valid combinations, duplicates, and required attributes depend on each type's definition.

rel types and where they can go

rel keyword	Main meaning	Allowed in body	Boundary
stylesheet	Adds an external CSS resource to the document's style system.	Yes	media, the disabled state, CSS response processing, and stylesheet readiness matter.
icon	Provides an icon candidate for a page or site.	Generally no	Candidate choice and presentation can depend on the user agent and platform.
preload	Fetches a resource early for the current navigation.	Yes	Uses as to specify the destination. A later request may not reuse it if relevant request properties do not match.
modulepreload	Uses the module-script preload processing model.	Yes	Relates to the module map rather than using ordinary preload processing; it uses module fetch rules.
preconnect	Prepares a connection to another origin.	Yes	It does not specify a resource body to fetch. Limit it to origins likely to be used soon.
dns-prefetch	Hints that name resolution for another origin may be done early.	Yes	It covers less than preconnect, which can establish a broader connection.
prefetch	Suggests fetching a resource that may be used by a future navigation.	Yes	The user agent decides whether and when to fetch; immediate fetching is not guaranteed.
alternate, canonical, help, next, prev	Describe a relationship to another document.	Generally no	Do not confuse interpretation by search services with browser navigation or a redirect.

This table does not cover every link type, registered extension, or the complete processing of HTTP Link headers.

Attributes and when they apply

Attribute	Meaning	Applicability and boundary
href	URL of the related document or resource to fetch.	Without it, the element generally does not represent a link. The DOM href property returns a URL resolved against the document base URL.
rel	Space-separated relationship keywords.	The keywords and their definitions determine whether the result is a hyperlink or external resource.
as	Fetch destination for a preload.	Required with a valid destination for preload. Used with a module preload destination for modulepreload.
media	Media condition for use.	Prescriptive for an external resource; advisory for a hyperlink describing the referenced document.
type	Expected MIME type.	A user agent can skip a fetch when it knows the type is unsupported. It does not guarantee or override the response's actual Content-Type.
crossorigin	Selects a CORS settings attribute state.	Relates to request mode and credentials; check type-specific fetch rules for defaults.
integrity	Subresource Integrity metadata.	Checks the fetched body against the declared hash metadata. Cross-origin resources also depend on CORS response conditions.
referrerpolicy	Referrer information policy for a request.	Applied when Fetch creates the request under Referrer Policy rules.
fetchpriority	Relative fetch-priority hint.	Accepts high, low, or auto; it does not guarantee a particular request order.
imagesrcset, imagesizes	Responsive image preload candidates and their display size.	Only under the specified conditions, including rel="preload" and as="image".
sizes	Provides a size for an icon candidate.	Used with an icon relationship; it is information a user agent can consider when choosing a candidate.
blocking	Affects whether a resource can block rendering.	Allowed values and behavior depend on the link type and processing state.

What the browser does

When the browser loads CSS or another file, it resolves the URL, prepares the request, fetches the file from a server, and then uses it according to its type. Each rel type can add conditions to this sequence.

link element + rel keyword
  ↓ determine relationship and applicable attributes
  ↓ resolve href against the document base URL
  ↓ create request options (destination, mode, credentials,
      integrity, referrer policy, priority, policy container)
  ↓ run the link type's fetch and process algorithm
  ↓ apply, expose, or use the resulting resource

Stylesheets

rel="stylesheet" passes a CSS resource to the style system. The media condition, CSSOM state, enabled or disabled state, response type, CSP, CORS, and other conditions take part in processing. A nonmatching media condition prevents application of the style under that condition, but does not always mean the fetch is skipped.

A parser-created stylesheet can temporarily delay script execution or rendering when the applicable conditions are met. This is conditional on parser insertion, media, stylesheet state, critical subresources, and related processing; it is not a claim that every stylesheet fetch completes at a fixed time.

Preload and modulepreload

preload fetches a resource early for the current navigation using the appropriate destination, mode, and other request properties, allowing a later request to reuse it. A later request may not reuse the result if relevant properties such as destination, CORS mode, or credentials do not match.

modulepreload uses module-script processing and connects to the module map. It is not the same processing as ordinary preload as="script". Fetching a module's dependencies too is an optimization user agents can use, not behavior required identically in every implementation.

Connection and early-fetch hints

preconnect, dns-prefetch, and prefetch differ from stylesheets that apply a resource to the current page. Processing a hint can involve user-agent discretion. When a link type fetches a resource, response status, redirects, CSP, CORS, integrity metadata, cache, and other specifications can also affect the result.

Inspecting the element from JavaScript

JavaScript sees a link element as an HTMLLinkElement. Use relList to check its relationship types and sheet to inspect its connected CSS. The related CSS interface is named LinkStyle.

const link = document.querySelector('link[rel="stylesheet"]');

link instanceof HTMLLinkElement;
link.relList.contains('stylesheet');
link.href;       // URL resolved using the base URL
link.getAttribute('href'); // value written in markup
link.sheet;      // inspect its stylesheet association

Whether changing rel, href, or connection state triggers a new fetch depends on the link type. Do not infer request count or reuse from an attribute change alone; check the type's processing model and measure it.

Specification claims and evidence

Each major claim is paired with its conditions and specification source. Implementation observations are recorded separately below.

Specification sources

1. HTML Standard: The link element — content model, body-ok, attributes, and DOM API
2. HTML Standard: Link types — rel keyword classes and type-specific meaning
3. HTML Standard: Link processing — request options and common external-resource processing
4. HTML Standard: preload and modulepreload — type-specific preloading algorithms
5. Fetch Standard and Subresource Integrity — request mode, credentials, and integrity checks
6. CSSOM: LinkStyle — stylesheet interface
7. HTML-AAM: link — platform accessibility mapping

Implementation Evidence

These are observations from a specific fixture, browser, and operating system, not requirements from a specification. Results from one environment are not generalized to other implementations.

WPT coverage includes only the selected tests. AAM notes distinguish the normative mapping from the browser AX tree observation.

Checked scope and open questions

• ReviewedClassification of major link types, basic stylesheet and preload processing, relationship attributes, and DOM APIs
• Spec and implementation gapThe 2026-10-01 rerun reproduced the same five failures in link-load-error-events.html. For the direct case, the test loads an HTML page as a stylesheet; the HTML Standard requires an error for a non-CSS response, so the observed load is a clear mismatch. The other four failures involve an imported sheet's error not reaching the outer link event. The HTML Standard says stylesheet subresource fetching is not fully specified; issue #968 tracks a possible fix. The event alone does not show whether the deepest HTTP import was actually blocked.
• OpenAll rel types and registered extensions, HTTP Link headers, and complete interaction with early hints
• OpenDifferences in request reuse, priority, render blocking, and icon candidate selection across browsers
• OpenWindows UI Automation was checked only in the Codex in-app browser. Narrator or other screen reader output, other browser windows, Firefox, Safari, and mobile browsers remain untested.

This is initial coverage. It does not claim that every link type or environment has been reviewed, that implementations behave identically, or that all WPTs pass.

Related pages

For beginner-friendly stylesheet and preload examples and the difference from a, see the link element page in Yugien. For clickable hyperlinks, see the a element; for script execution and module processing, see the script element.