Published: 11 May 2025
5-min read
Table of Contents
INTRODUCTION
It allows developer to specify relation between HTML webpage and external resource. External resource can be stylesheets, favicon, fonts etc. The 'rel' keyword in link tag refers to relationship.
Attributes
The attributes that be used with <link> element are listed below.
- as
- blocking
- crossorigin
- disabled
- fetchpriority
- href
- hreflang
- imagesizes
- imagesrcset
- integrity
- media
- referrerpolicy
- rel
- sizes
- title
- type
1. as
This attribute specify the type of content which is loaded by <link> element. Type of content is required for content security policy and request matching It is used only when rel="preload" has been used.
<link rel="preload" as="audio" href="music.mp3">We will see preload in more detail in this article. The table below lists the valid values of this attribute and type of resource they are used for.
| Value | Type of Element |
|---|---|
| audio | <audio> element |
| document | <iframe> element |
| embed | <embed> element |
| fetch | fetch |
| font | CSS font |
| image | <img> and <picture> element |
| object | <object> element |
| script | <script> element |
| style | <link rel=stylesheet> element |
| track | <track> element |
| video | <video> element |
| worker | worker |
2. blocking
This attribute specifies that certain operations should be blocked on the fetching of external resource. The operations that are to be blocked must be a space separated list of blocking tokens.
Example: In the below example the rendering of content is blocked.
<link rel="stylesheet" href="./styles.css" blocking="render" >3. crossorigin
The crossorigin attribute provides support for CORS. Cross-Origin Resource Sharing(CORS) is a mechanism that allows server to specify any origins (meaning external server/website) other that itself from which browser is permitted to access resources. For security reasons Browsers restrict cross-origin requests
This attribute defines whether user credentials should be sent during CORS request. User Credentials are generally cookies, TLS client certificates or HTTP authentication header containing username and password. By default, these credentials are not sent in Cross-Origin request which makes a site vulnerable to Cross-site Request Forgery. The possible values of this attribute are listed below.
- anonymous: Cross-Origin request is performed without user-credentials.
- use-credentials: Cross-Origin request is performed using user-credentials.
- If this attribute is not present the resource is fetched without CORS request.
- If the value of this attribute is invalid, then it resolves to anonymous.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">4. disabled
This attribute is only used for rel="stylesheet". It specifies whether the stylesheet should be loaded and applied to document or not. If disabled is specified, then stylesheet will not be loaded. The stylesheet will be loaded on-demand when the disabled attribute is removed.
<link rel="stylesheet" disabled href="styles.css">
5. fetchpriority
The attribute is used to specify to browser the download priority for resource. The Possible values are listed below.
- high - This value assigns a higher priority to a resource relative to other resources.
- low - This value assigns a lower priority to a resource relative to other resources.
- auto - It is used when you dont want to set a preference for fetchpriority. This is the default value. If no value or invalid value is specified then this option is used
<link rel="stylesheet" href="styles.css" fetchpriority="high">6. href
The attributes specifies the URL of external resource. The URL can be absolute or relative.
<link rel="stylesheet" href="./styles.css">7. hreflang
This attribute specify the language of external resource. You can use this attribute only if href attribute is present.
<link rel="alternate" hreflang="de" href="www.example/com/blog/de">8. imagesizes
The imagesizes along with imagesrcset attribute is used to preload responsive images. This attribute can be used only when rel="preload" and as="image" has been used. It has similar syntax and semantics as sizes attribute of <img> HTML element.
<link rel="preload" as="image" imagesizes="50vw" href="./menubar-icon-152x152.png">9. imagesrcset
The imagesrcset along with imagesizes attribute is used to preload responsive images. The attributes can be used only when rel="preload" and as="image" has been used. It has similar syntax and semantics as srcset attribute of <img> HTML element.
<link rel="stylesheet" as="image" imagesrcset="clock-200px.png 20vw clock-400px.png 40vw" href="./clock.png" >10. integrity
This attribute contains the cryptographic hash of the external resource. Hash is a digital signature of data which is generate using cryptographic hash function. The browser can use this to verify whether the downloaded resource is manipulated or not. This attribute can only be used when rel attribute is used for stylesheet, preload or modulepreload.
<link rel="stylesheet" href="my_stylesheet.css" integrity="sha256-10c1f22695d2e67cc2dd47baa775da0ea84d4101ab9eb3e733f30e5010b671b7">
11. media
This attribute specifies the media that the external resource applies to. Its value should be a media type or media query.
<link rel="stylesheet" href="my_stylesheet.css" media="print">
12. referrerpolicy
This attribute indicates the referrer to use when fetching external resource.
The referrer attribute is used to define the HTTP header referrer for the outgoing links from the current webpage.
The HTTP Referrer header contains the address of the previous page from which a request was made. It makes possible to identify the referring website. This header is commonly used for analytics, logging, access control and security purposes.
In the below example a user is on website-A and clicks on a link that points to website-B. The user's browser makes an HTTP request to the server of website-B. In this case the referrer is website-A. In the HTTP request referrer header contains address of website-A.
The values this attribute can take are listed below.
- no-referrer: Do not send HTTP referrer header.
- origin: send the origin of the webpage.
- no-referrer-when-downgrade: When the destination webpage is atleast as secure as the current page(HTTP(S) -- HTTPS ) send the full URL as referrer, and if its less secure(HTTPS -- HTTP ) send no referrer. This the default option.
- origin-when-cross-origin: when request comes from same-origin send full url and for other cases send only origin.
- unsafe-URL: whether request comes from same-origin or cross-origin send full url. This case is unsafe because it can leak origins and paths to insecure origins.
<link rel="stylesheet" href="example.com" referrerpolicy="no-referrer">13. rel
This attribute defines the relationship between external resource and document. The relation types are listed below.
| rel value | Usage |
|---|---|
| alternate | It is used to inform about different versions of webpage. (EX: webpage in different language or device specific version) |
| author | It is used to specify author of webpage. |
| bookmark | It is used to provide a link to the nearest ancestor <article> element. |
| canonical | It is used to inform search engine which webpage is main version when there are similar or duplicate webpages. |
| dns-prefetch | It instructs the browser to do DNS resolution of the link even before it is requested. |
| external | It is used to indicate that the webpage referenced by link is not part of current website. |
| expect | It instructs the browser to block rendering until the necessary parts of the document are parsed so webpage can be render consistently. |
| help | It is used to inform that the linked webpage contains Help information. |
| icon | It indicates that the linked resource is an icon. |
| license | It informs that content of webpage is protected by copyright license. it also indicates that linked webpage contains licensing information. |
| manifest | It represents web-app manifest. A web-application manifest is a JSON text file that provides information about the web-application. |
| me | worker |
| modulepreload | It informs the browser to fetch, parse and compile a module script in advance and stored it for later execution. |
| next | It informs that current webpage is part of series and next webpage in the series is the one being referenced by link. |
| nofollow | It informs the search engine not to follow the link and do not crawl the linked webpage. Also, the linked webpage is not passed any Page Rank. |
| noopener | This attribute provides security to site visitors. When a link is opened in a new browser tab, it prevents the third-party website from taking control over browser tab by not granting access to the window.opener property on the opened window/tab. |
| opener | It is exact opposite of noopener |
| no-referrer | It instructs the browser to exclude the referrer header. |
| pingback | Pingback is a notification that allows a webpage author to know when other blog/webpage links to it. A pingback server is a server that receives pingback request and notify author. This attribute gives the address of pingback server. |
| preconnect | It instructs the browser to establish connection with linked website even before sending request to it. So, the browser does DNS lookup, TCP handshake and TLS Negotiation which saves more time when the link is actually requested. |
| prefetch | Prefetch hints the browser that resource might be need in future so the browser should fetch and cache the resource in advance. Resource is stored in browser cache. |
| preload | Prefetch instructs the browser that resource will be needed very soon so the browser must fetch and cache the resource in advance. |
| prev | It informs that current webpage is part of series and previous webpage in the series is the one being referenced by link. |
| privacy-policy | It informs that linked webpage contains Privacy Policy for the current webpage. This policy describes the data collection and usage practises of current webpage. |
| search | This attribute indicate that the linked webpage provides features for searching the current webpage or site. |
| stylesheet | It is used to import an external stylesheet. |
| tag | It is use to give tag that applies to the current webpage. |
| terms-of-service | It is use to indicate that the linked webpage contains Terms of Service. This webpage describes the agreement between webpage provider and user who wish to use the webpage. |
| apple-touch-icon | It is used to specify icon for web-application on iOS device. |
Example: The most popular use of this attribute is to specify favicon of website.
<link rel="apple-touch-icon" sizes="57x57" href="./apple-icon-57x57.png">
<link rel="icon" type="image/png" sizes="192x192" href="./android-icon-192x192.png">14. sizes
This attribute is used to define the size of icon. It can be used only if rel value is icon or nonstandard value apple-touch-icon The possible values are listed below.
- all : It means that icon can be scaled to any size.
- Width in pixel x height in pixel : You can specify a space separated list of sizes in the above format.
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon114.png" type="image/png">
15. title
This attribute is used to give additional information about the linked resource. It's mostly relevant when you're linking alternate stylesheets.
<link rel="alternate stylesheet" href="dark.css" title="Dark Mode">
16. type
This attribute specify the type of content which is linked to. Its value should be MIME type such as text/html, text/css and so on. Type of content is required for content security policy and request matching It is also used when rel="preload" has been used.
<link rel="stylesheet" href="my_stylesheet.css" type="text/css">
Frequently Asked Questions (FAQ)
Do You Need to Close <link> Tag in HTML?
What is the purpose of the link tag in HTML?
How to link html with css?
Example:
<link rel="stylesheet" href="style.css">