diff options
Diffstat (limited to 'devdocs/html/element%2Flink.html')
| -rw-r--r-- | devdocs/html/element%2Flink.html | 503 |
1 files changed, 503 insertions, 0 deletions
diff --git a/devdocs/html/element%2Flink.html b/devdocs/html/element%2Flink.html new file mode 100644 index 00000000..8714a5db --- /dev/null +++ b/devdocs/html/element%2Flink.html @@ -0,0 +1,503 @@ +<header><h1><link>: The External Resource Link element</h1></header><div class="section-content"><p> The <code><link></code> <a href="../index">HTML</a> element specifies relationships between the current document and an external resource. This element is most commonly used to link to <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">stylesheets</a>, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. </p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/link.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>To link an external stylesheet, you'd include a <code><link></code> element inside your <a href="head"><code><head></code></a> like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="yd99hgsDkt0nYYltFbi3414dS176ga+Iys8raiW52IQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>This simple example provides the path to the stylesheet inside an <code>href</code> attribute, and a <a href="../attributes/rel"><code>rel</code></a> attribute with a value of <code>stylesheet</code>. The <code>rel</code> stands for "relationship", and is one of the key features of the <code><link></code> element — the value denotes how the item being linked to is related to the containing document.</p> <p>There are a number of other common types you'll come across. For example, a link to the site's favicon:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bNWRQSgMJ5lvH4tEqJJoMKBlYGGEJbaC1RB6YHUh+EE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>There are a number of other icon <code>rel</code> values, mainly used to indicate special icon types for use on various mobile platforms, e.g.:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="UQ0+hLiF0qwA+J7WTT2WwkqDiXNRj+E01ulyYEPgED0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> + <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>114x114<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-icon-114.png<span class="token punctuation">"</span></span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p> The <code>sizes</code> attribute indicates the icon size, while the <code>type</code> contains the MIME type of the resource being linked. These provide useful hints to allow the browser to choose the most appropriate icon available. </p> <p>You can also provide a media type or query inside a <code>media</code> attribute; this resource will then only be loaded if the media condition is true. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="aELLDMFU47rL/TmycTIGMtKvLRVB7dvIQEvbLFFekYg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mobile.css<span class="token punctuation">"</span></span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen and (max-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Some interesting new performance and security features have been added to the <code><link></code> element too. Take this example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="aJQL7u5ZpARf1KBfV9cdKRk6srd8DqtlSVAPi9BkIw8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myFont.woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font<span class="token punctuation">"</span></span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font/woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p> A <code>rel</code> value of <code>preload</code> indicates that the browser should preload this resource (see <a href="../attributes/rel/preload"><code>rel="preload"</code></a> for more details), with the <code>as</code> attribute indicating the specific class of content being fetched. The <code>crossorigin</code> attribute indicates whether the resource should be fetched with a <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> request. </p> <p>Other usage notes:</p> <ul> <li> A <code><link></code> element can occur either in the <a href="head"><code><head></code></a> or <a href="body"><code><body></code></a> element, depending on whether it has a <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok" target="_blank">link type</a> that is <strong>body-ok</strong>. For example, the <code>stylesheet</code> link type is body-ok, and therefore <code><link rel="stylesheet"></code> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <code><link></code> elements from your body content, putting them in the <code><head></code>. </li> <li> When using <code><link></code> to establish a favicon for a site, and your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy"><code>Content-Security-Policy</code></a> header's <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it. </li> <li>The HTML and XHTML specifications define event handlers for the <code><link></code> element, but it is unclear how they would be used.</li> <li>Under XHTML 1.0, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void elements</a> such as <code><link></code> require a trailing slash: <code><link /></code>.</li> <li>WebTV supports the use of the value <code>next</code> for <code>rel</code> to preload the next page in a document series.</li> </ul> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="as"><a href="#as"><code>as</code></a></dt> <dd> <p> This attribute is required when <a href="../attributes/rel/preload"><code>rel="preload"</code></a> has been set on the <code><link></code> element, optional when <a href="../attributes/rel/modulepreload"><code>rel="modulepreload"</code></a> has been set, and otherwise should not be used. It specifies the type of content being loaded by the <code><link></code>, which is necessary for request matching, application of correct <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">content security policy</a>, and setting of correct <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> request header. </p> <p> Furthermore, <code>rel="preload"</code> uses this as a signal for request prioritization. The table below lists the valid values for this attribute and the elements or resources they apply to. </p> <figure class="table-container"><div class="_table"><table class="standard-table"> <thead> <tr> <th scope="col">Value</th> <th scope="col">Applies To</th> </tr> </thead> <tbody> <tr> <td>audio</td> <td> +<code><audio></code> elements</td> </tr> <tr> <td>document</td> <td> +<code><iframe></code> and <code><frame></code> elements</td> </tr> <tr> <td>embed</td> <td> +<code><embed></code> elements</td> </tr> <tr> <td>fetch</td> <td> <p>fetch, XHR</p> <div class="notecard note" id="sect1"> <p> <strong>Note:</strong> This value also requires <code><link></code> to contain the crossorigin attribute, see <a href="../attributes/rel/preload#cors-enabled_fetches">CORS-enabled fetches</a>. </p> </div> </td> </tr> <tr> <td>font</td> <td>CSS @font-face</td> </tr> <tr> <td>image</td> <td> <code><img></code> and <code><picture></code> elements with srcset or imageset attributes, SVG <code><image></code> elements, CSS <code>*-image</code> rules </td> </tr> <tr> <td>object</td> <td> +<code><object></code> elements</td> </tr> <tr> <td>script</td> <td> +<code><script></code> elements, Worker <code>importScripts</code> +</td> </tr> <tr> <td>style</td> <td> <code><link rel=stylesheet></code> elements, CSS <code>@import</code> </td> </tr> <tr> <td>track</td> <td> +<code><track></code> elements</td> </tr> <tr> <td>video</td> <td> +<code><video></code> elements</td> </tr> <tr> <td>worker</td> <td>Worker, SharedWorker</td> </tr> </tbody> </table></div></figure> </dd> <dt id="blocking"> +<a href="#blocking"><code>blocking</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. The operations that are to be blocked must be a space-separated list of blocking attributes listed below.</p> <ul> <li> +<code>render</code>: The rendering of content on the screen is blocked.</li> </ul> </dd> <dt id="crossorigin"><a href="#crossorigin"><code>crossorigin</code></a></dt> <dd> <p> This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicates whether <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> must be used when fetching the resource. <a href="../cors_enabled_image">CORS-enabled images</a> can be reused in the <a href="canvas"><code><canvas></code></a> element without being <em>tainted</em>. The allowed values are: </p> <dl> <dt id="anonymous"><a href="#anonymous"><code>anonymous</code></a></dt> <dd> <p> A cross-origin request (i.e. with an <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a> HTTP header) is performed, but no credential is sent (i.e. no cookie, X.509 certificate, or HTTP Basic authentication). If the server does not give credentials to the origin site (by not setting the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> HTTP header) the resource will be tainted and its usage restricted. </p> </dd> <dt id="use-credentials"><a href="#use-credentials"><code>use-credentials</code></a></dt> <dd> <p> A cross-origin request (i.e. with an <code>Origin</code> HTTP header) is performed along with a credential sent (i.e. a cookie, certificate, and/or HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials"><code>Access-Control-Allow-Credentials</code></a> HTTP header), the resource will be <em>tainted</em> and its usage restricted. </p> </dd> </dl> <p> If the attribute is not present, the resource is fetched without a <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> request (i.e. without sending the <code>Origin</code> HTTP header), preventing its non-tainted usage. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="../attributes/crossorigin">CORS settings attributes</a> for additional information. </p> </dd> <dt id="disabled"> +<a href="#disabled"><code>disabled</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p> For <code>rel="stylesheet"</code> only, the <code>disabled</code> Boolean attribute indicates whether the described stylesheet should be loaded and applied to the document. If <code>disabled</code> is specified in the HTML when it is loaded, the stylesheet will not be loaded during page load. Instead, the stylesheet will be loaded on-demand, if and when the <code>disabled</code> attribute is changed to <code>false</code> or removed. </p> <p>Setting the <code>disabled</code> property in the DOM causes the stylesheet to be removed from the document's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets"><code>Document.styleSheets</code></a> list.</p> </dd> <dt id="fetchpriority"> +<a href="#fetchpriority"><code>fetchpriority</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>Provides a hint of the relative priority to use when fetching a preloaded resource. Allowed values:</p> <dl> <dt id="high"><a href="#high"><code>high</code></a></dt> <dd> <p>Signals a high-priority fetch relative to other resources of the same type.</p> </dd> <dt id="low"><a href="#low"><code>low</code></a></dt> <dd> <p>Signals a low-priority fetch relative to other resources of the same type.</p> </dd> <dt id="auto"><a href="#auto"><code>auto</code></a></dt> <dd> <p>Default: Signals automatic determination of fetch priority relative to other resources of the same type.</p> </dd> </dl> </dd> <dt id="href"><a href="#href"><code>href</code></a></dt> <dd> <p>This attribute specifies the <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL">URL</a> of the linked resource. A URL can be absolute or relative.</p> </dd> <dt id="hreflang"><a href="#hreflang"><code>hreflang</code></a></dt> <dd> <p> This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are specified by <a href="https://datatracker.ietf.org/doc/html/rfc5646" target="_blank">RFC 5646: Tags for Identifying Languages (also known as BCP 47)</a>. Use this attribute only if the <a href="a#href"><code>href</code></a> attribute is present. </p> </dd> <dt id="imagesizes"><a href="#imagesizes"><code>imagesizes</code></a></dt> <dd> <p>For <code>rel="preload"</code> and <code>as="image"</code> only, the <code>imagesizes</code> attribute is <a href="https://html.spec.whatwg.org/multipage/images.html#sizes-attribute" target="_blank">a sizes attribute</a> that indicates to preload the appropriate resource used by an <code>img</code> element with corresponding values for its <code>srcset</code> and <code>sizes</code> attributes.</p> </dd> <dt id="imagesrcset"><a href="#imagesrcset"><code>imagesrcset</code></a></dt> <dd> <p>For <code>rel="preload"</code> and <code>as="image"</code> only, the <code>imagesrcset</code> attribute is <a href="https://html.spec.whatwg.org/multipage/images.html#srcset-attribute" target="_blank">a sourceset attribute</a> that indicates to preload the appropriate resource used by an <code>img</code> element with corresponding values for its <code>srcset</code> and <code>sizes</code> attributes.</p> </dd> <dt id="integrity"><a href="#integrity"><code>integrity</code></a></dt> <dd> <p> Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you're telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>. </p> </dd> <dt id="media"><a href="#media"><code>media</code></a></dt> <dd> <p> This attribute specifies the media that the linked resource applies to. Its value must be a media type / <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">media query</a>. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on. </p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong></p> <ul> <li> In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media">media types and groups</a>, where defined and allowed as values for this attribute, such as <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 extended this to any kind of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">media queries</a>, which are a superset of the allowed values of HTML 4. </li> <li>Browsers not supporting <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">CSS Media Queries</a> won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.</li> </ul> </div> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>A string indicating which referrer to use when fetching the resource:</p> <ul> <li> +<code>no-referrer</code> means that the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> <code>no-referrer-when-downgrade</code> means that no <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified. </li> <li> +<code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li> <li> +<code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li> <li> <code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins. </li> </ul> </dd> <dt id="rel"><a href="#rel"><code>rel</code></a></dt> <dd> <p>This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of <a href="../attributes/rel">link type values</a>.</p> </dd> <dt id="sizes"> +<a href="#sizes"><code>sizes</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p> This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the <a href="#rel"><code>rel</code></a> contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values: </p> <ul> <li> +<code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li> <li>a white-space separated list of sizes, each in the format <code><width in pixels>x<height in pixels></code> or <code><width in pixels>X<height in pixels></code>. Each of these sizes must be contained in the resource.</li> </ul> <div class="notecard note" id="sect3"> <p> <strong>Note:</strong> Most icon formats are only able to store one single icon; therefore, most of the time, the <a href="#sizes"><code>sizes</code></a> attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions). </p> </div> </dd> <dt id="title"><a href="#title"><code>title</code></a></dt> <dd> <p> The <code>title</code> attribute has special semantics on the <code><link></code> element. When used on a <code><link rel="stylesheet"></code> it defines a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">default or an alternate stylesheet</a>. </p> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p> This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as <strong>text/css</strong>), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the <code>type</code> attribute, but is actually now recommended practice. It is also used on <code>rel="preload"</code> link types, to make sure the browser only downloads file types that it supports. </p> </dd> </dl> +</div> +<h3 id="non-standard_attributes">Non-standard attributes</h3> +<div class="section-content"><dl> <dt id="methods"> +<a href="#methods"><code>methods</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. </p> </dd> <dt id="target"> +<a href="#target"><code>target</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</p> </dd> </dl></div> +<h3 id="obsolete_attributes">Obsolete attributes</h3> +<div class="section-content"><dl> <dt id="charset"> +<a href="#charset"><code>charset</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in <a href="https://datatracker.ietf.org/doc/html/rfc2045" target="_blank">RFC 2045</a>. The default value is <code>iso-8859-1</code>. </p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> To produce the same effect as this obsolete attribute, use the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> HTTP header on the linked resource.</p> </div> </dd> <dt id="rev"> +<a href="#rev"><code>rev</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> The value of this attribute shows the relationship of the current document to the linked document, as defined by the <a href="#href"><code>href</code></a> attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="../attributes/rel">Link type values</a> for the attribute are similar to the possible values for <a href="#rel"><code>rel</code></a>. </p> <div class="notecard note" id="sect5"> <p> <strong>Note:</strong> Instead of <code>rev</code>, you should use the <a href="#rel"><code>rel</code></a> attribute with the opposite <a href="../attributes/rel">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also, this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way. </p> </div> </dd> </dl></div> +<h2 id="examples">Examples</h2> + +<h3 id="including_a_stylesheet">Including a stylesheet</h3> +<div class="section-content"> +<p>To include a stylesheet in a page, use the following syntax:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="DvvZTZQUSZQXAdi/WSn6B9yZA37EzhmqxwhTYS45Gqs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="providing_alternative_stylesheets">Providing alternative stylesheets</h3> +<div class="section-content"> +<p>You can also specify <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p> <p> The user can choose which style sheet to use by choosing it from the <strong>View > Page Style</strong> menu. This provides a way for users to see multiple versions of a page. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="8PHBgZC9cfjYBDEFobhQP0jdcJrmlhs44ypheJVnj7A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Default Style<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fancy.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Fancy<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basic.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Basic<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3> +<div class="section-content"> +<p>You can include links to several icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="f+TkBHc5YLkmw1xTtInn/Tql7nGVRPTkZql73grG6rU=" data-language="html"><span class="token comment"><!-- third-generation iPad with high-resolution Retina display: --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144x144<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon144.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- iPhone with high-resolution Retina display: --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>114x114<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon114.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- first- and second-generation iPad: --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>72x72<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon72.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon57.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- basic favicon --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon32.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="conditionally_loading_resources_with_media_queries">Conditionally loading resources with media queries</h3> +<div class="section-content"> +<p> You can provide a media type or query inside a <code>media</code> attribute; this resource will then only be loaded if the media condition is true. For example: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Ng95STwoikVGw+hKB6w+gPNnQvTA+bu59CGQ3OKMFSY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mobile.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>desktop.css<span class="token punctuation">"</span></span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen and (min-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>highres.css<span class="token punctuation">"</span></span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen and (min-resolution: 300dpi)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="stylesheet_load_events">Stylesheet load events</h3> +<div class="section-content"> +<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Bjo7QXeHMJivDENJjpP41TBVQ2fY0tZnIYE5RPhSPw4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token keyword">const</span> stylesheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#my-stylesheet"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + stylesheet<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// Do something interesting; the sheet has been loaded</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + stylesheet<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"An error occurred loading the stylesheet!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mystylesheet.css<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</p> </div> +</div> +<h3 id="preload_examples">Preload examples</h3> +<div class="section-content"><p>You can find a number of <code><link rel="preload"></code> examples in <a href="../attributes/rel/preload">Preloading content with <code>rel="preload"</code></a>.</p></div> +<h3 id="blocking_rendering_till_a_resource_is_fetched">Blocking rendering till a resource is fetched</h3> +<div class="section-content"> +<p> You can include <code>render</code> token inside a <code>blocking</code> attribute; the rendering of the page will be blocked till the resource is fetched. For example: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+hpnMZQm2TuM5SPQYET9iRblnaGshQVTkElMFSONUCI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">blocking</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>render<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>critical-font.woff2<span class="token punctuation">"</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th><a href="../content_categories">Content categories</a></th> <td> Metadata content. If <code><a href="../global_attributes/itemprop">itemprop</a></code> is present: <a href="../content_categories#flow_content">Flow content</a> and <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th>Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th>Tag omission</th> <td>As it is a void element, the start tag must be present and the end tag must not be present</td> </tr> <tr> <th>Permitted parents</th> <td> Any element that accepts metadata elements. If <a href="../global_attributes/itemprop">itemprop</a> is present: any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a> with <code>href</code> attribute</td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th>DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-link-element">HTML Standard <br><small># the-link-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>link</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>blocking</code></th> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">91</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">20.0</td> +</tr> +<tr> +<th><code>charset</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>crossorigin</code></th> +<td class="bc-supports-yes">34</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes"><details><summary>18</summary>Before Firefox 83, <code>crossorigin</code> is not supported for <code>rel="icon"</code>.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">34</td> +<td class="bc-supports-yes"><details><summary>18</summary>Before Firefox 83, <code>crossorigin</code> is not supported for <code>rel="icon"</code>.</details></td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">2.0</td> +</tr> +<tr> +<th><code>disabled</code></th> +<td class="bc-supports-yes"><details><summary>1</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>Since Edge 79, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes"><details><summary>≤12.1</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes"><details><summary>≤12.1</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>In Samsung Internet and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +</tr> +<tr> +<th><code>fetchpriority</code></th> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">preview</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">19.0</td> +</tr> +<tr> +<th><code>href</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>hreflang</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>imagesizes</code></th> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">78</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11.0</td> +</tr> +<tr> +<th><code>imagesrcset</code></th> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">78</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11.0</td> +</tr> +<tr> +<th><code>integrity</code></th> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">32</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">32</td> +<td class="bc-supports-yes">11.3</td> +<td class="bc-supports-yes">5.0</td> +</tr> +<tr> +<th><code>media</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>methods</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">12–79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>rel</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rev</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>sizes</code></th> +<td class="bc-supports-yes">≤80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">≤72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">13.0</td> +</tr> +<tr> +<th><code>target</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>title</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>type</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link"><code>Link</code></a> HTTP header</li> <li> +<a href="https://150daysofhtml.com/book/day010/" target="_blank">The <code>integrity</code> attribute</a> on 150daysofhtml.com (2021)</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link</a> + </p> +</div> |