HTML <link> Element
The HTML <link> element defines a relationship between the current HTML document and an external resource. It is commonly used to load external CSS stylesheets, but it can also identify icons, preload resources, provide alternate versions of content, and describe other relationships.
Syntax
<link rel="stylesheet" href="styles.css">The rel attribute describes the relationship between the current document and the linked resource, while the href attribute specifies the resource's URL. The <link> element is a void element, so it does not have a closing tag and cannot contain content.
Attributes
The <link> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
as |
Specifies the type of resource being fetched when certain link relationships, such as preload, are used. |
blocking |
Indicates that particular operations should be blocked until the external resource is ready. |
crossorigin |
Controls how cross-origin requests are handled when fetching the linked resource. |
disabled |
Allows a linked stylesheet to be disabled when the attribute applies to the link relationship. |
fetchpriority |
Provides a hint about the relative priority the browser should use when fetching the linked resource. |
href |
Specifies the URL of the external resource. |
hreflang |
Specifies the language of the linked resource. |
imagesizes |
Provides image size information when preloading a responsive image. |
imagesrcset |
Provides a set of image candidates when preloading a responsive image. |
integrity |
Provides cryptographic information that allows the browser to verify that a fetched resource has not been unexpectedly modified. |
media |
Specifies the media or conditions for which the linked resource is intended. |
referrerpolicy |
Controls how much referrer information is sent when the linked resource is requested. |
rel |
Specifies the relationship between the current document and the linked resource. |
sizes |
Specifies sizes for certain linked resources, most commonly icons. |
title |
Provides advisory information and can identify an alternate stylesheet when used with the appropriate relationship. |
type |
Provides a hint about the MIME type of the linked resource. |
Example
This example links an external stylesheet to an HTML document. The CSS file changes the appearance of the heading and paragraph displayed in the editor.
Usage Notes
The <link> element is most commonly placed inside the document's <head> element because it usually provides metadata or loads resources needed by the document.
To load an external CSS stylesheet, use rel="stylesheet" together with an href value identifying the stylesheet file.
The rel attribute is essential because it tells the browser how the linked resource relates to the current document. Different relationship values can cause the browser to handle the resource in different ways.
Common relationship values include stylesheet for external CSS, icon for site icons, preload for resources that should be fetched early, and alternate for alternate representations of the document.
When linking a CSS stylesheet, the type="text/css" attribute is unnecessary in HTML because CSS is the default stylesheet language.
The <link> element does not create a clickable hyperlink for users. Use the <a> element when users should be able to follow a link to another page or resource.
Accessibility
The <link> element normally does not create visible or directly interactive content, so most uses do not require additional accessibility markup.
When alternate stylesheets or alternate versions of content are provided, make sure their purpose is clear and that users are not prevented from accessing essential information or functionality.
Resources loaded through <link>, particularly stylesheets, should support accessible presentation by maintaining readable text, sufficient contrast, visible focus indicators, and layouts that remain usable when content is enlarged.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <link> Element .
Support can vary for individual rel values and newer <link> attributes, even though the element itself and common uses such as external stylesheets are widely supported.
Related Elements
<head> - Contains document metadata and commonly contains <link> elements.
<style> - Defines CSS rules directly within an HTML document.
<a> - Creates hyperlinks that users can follow to other pages, files, or locations.
<meta> - Provides metadata about an HTML document.
<base> - Specifies the base URL used to resolve relative URLs in a document.