<link>

  • Revision slug: Web/HTML/Element/link
  • Revision title: <link>
  • Revision id: 391249
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From HTML/Element/link to Web/HTML/Element/link

Revision Content

Summary

The HTML <link> Element specifies relationships between the current document and other documents. Possible uses for this element include defining a relational framework for navigation and linking the document to a style sheet.

  • Content categories Metadata content. If {{htmlattrxref("itemprop", "link")}} is present: flow content phrasing content
  • Permitted content None, this is a void element.
  • Tag omission As it is a void element, the start tag must be present and the end tag must not be present
  • Permitted parent elements Any element that accept metadata elements. If {{htmlattrxref("itemprop", "link")}} is present: any element that accepts phrasing content.
  • DOM interface {{domxref("HTMLLinkElement")}}

Attributes

This element includes the global attributes.

{{htmlattrdef("charset")}}{{obsolete_inline}}
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 RFC 2045. The default value is ISO-8859-1.
Usage note: This attribute is obsolete in HTML5 and must not be used by authors. To achieve its effect, use the Content-Type: HTTP header on the linked resource.
{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}
This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. CORS-enabled images can be reused in the {{HTMLElement("canvas")}} element without being tainted. The allowed values are:
anonymous
A cross-origin request (i.e. with Origin: HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted and its usage restricted..
use-credentials
A cross-origin request (i.e. with Origin: HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.
When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.
{{htmlattrdef("disabled")}} {{Non-standard_inline}}
This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships.

Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.

The use of disabled as an HTML attribute is non-standard and only used by some Microsoft browsers. Do not use it. To achieve a similar effect, use one of the following techniques:

  • If the disabled attribute has been added directly to the element on the page, do not include the {{HTMLElement("link")}} element instead;
  • Set the disabled property of the DOM object via scripting.
{{htmlattrdef("href")}}
This attribute specifies the URL of the linked resource. A URL might be absolute or relative.
{{htmlattrdef("hreflang")}}
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML 4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.
{{htmlattrdef("media")}}
This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.
Usage note:
  • In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. HTML5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
  • Browsers not supporting the CSS3 Media Queries won't necessary recognized the adequate link; do not forget to set fallback links,  the restricted set of media queries defined in HTML 4.
{{htmlattrdef("methods")}} {{Non-standard_inline}}
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 title 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. See Methods Property (MSDN).
{{htmlattrdef("rel")}}
This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values. The most common use of this attribute is to specify a link to an external style sheet: the rel attribute is set to stylesheet, and the href attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value next for rel to preload the next page in a document series.
{{htmlattrdef("rev")}}{{obsolete_inline}}
The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{htmlattrxref("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the rel attribute. Link types values for the attribute are similar to the possible values for {{htmlattrxref("rel", "link")}}.
Usage note: This attribute is obsolete in HTML5. Do not use it. To achieve its effect, use the {{htmlattrxref("rel", "link")}} attribute with the opposite link types values, e.g. made should be replaced by author. Also this attribute doesn't mean revision and must not be used with a version number, which is unfortunately the case on numerous sites.
{{htmlattrdef("sizes")}} {{HTMLVersionInline(5)}}
This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{htmlattrxref("rel","link")}} contains the icon link types value. It may have the following values:
  • any, meaning that the icon can be scaled to any size as it is in a vectorial format, like image/svg.
  • a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.
Usage note:
  • Most icon format are only able to store one single icon; therefore most of the time the {{htmlattrxref("sizes")}} contains only one entry. Among the major browsers, only the Apple's ICNS format allows the storage of multiple icons, and this format is only supported in WebKit.
  • Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard link types values to define icon to be used as Web Clip or start-up placeholder: apple-touch-icon and apple-touch-startup-icon.
{{htmlattrdef("target")}}{{Non-standard_inline}}
Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.
{{htmlattrdef("type")}}
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 text/html, text/css, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is text/css, which indicates a Cascading Style Sheet format.

Examples

Including a stylesheet

To include a stylesheet in a page, use the following syntax:

<link href="style.css" rel="stylesheet" type="text/css" media="all">

Providing alternative stylesheets

You can also specify alternative style sheets.

The user can choose which style sheet to use by choosing it from the View>Page Style menu. This provides a way for users to see multiple versions of a page.

<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">

Stylesheet load events

You can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event:

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" type="text/css" onload="sheetLoaded()" onerror="sheetError()">
Note: The load 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.

Notes

  • A <link> tag can occur only in the head element; however, there can be multiple occurrences of <link>.
  • HTML 3.2 defines only the href, rel, rev, and title attributes for the link element.
  • HTML 2 defines the href, methods, rel, rev, title, and urn attributes for the <link> element. The methods and urn attributes were later removed from the specifications.
  • The HTML and XHTML specifications define event handlers for the <link> element, but it is unclear how they would be used.
  • Under XHTML 1.0, empty elements such as <link> require a trailing slash: <link />.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-link-element.html#the-link-element', '<link>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'links.html#h-12.3', '<link>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{CompatGeckoDesktop("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Alternative stylesheets {{CompatUnknown}} {{CompatGeckoDesktop("1.9")}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}}
disabled attribute {{Non-standard_inline}} {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatNo}}
methods attribute {{Non-standard_inline}} {{CompatNo}} {{CompatNo}} 4.0 {{CompatNo}} {{CompatNo}}
sizes attribute {{CompatNo}} {{CompatNo}} {{bug("441770")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
load and error events

19 (Webkit: 535.23)

({{webkitbug(38995)}})

{{CompatGeckoDesktop("9.0")}} {{CompatUnknown}} 11.60 {{CompatUnknown}}
crossorigin attribute {{CompatUnknown}} {{CompatGeckoDesktop("18.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Alternative stylesheets {{CompatUnknown}} {{CompatGeckoMobile("2.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
disabled attribute {{Non-standard_inline}} {{CompatNo}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}}
methods attribute {{Non-standard_inline}} {{CompatNo}} {{CompatNo}} 4.0 {{CompatNo}} {{CompatNo}}
sizes attribute {{CompatNo}} {{CompatNo}} {{bug("441770")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
load and error events {{CompatUnknown}} {{CompatGeckoMobile("9.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
crossorigin {{CompatUnknown}} {{CompatGeckoMobile("18.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

{{HTML:Element_Navigation}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;link&gt;</code> Element</strong> specifies relationships between the current document and other documents. Possible uses for this element include defining a relational framework for navigation and linking the document to a style sheet.</p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> Metadata content. If {{htmlattrxref("itemprop", "link")}} is present: <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">flow content</a><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content"> phrasing content</a></li>
  <li><dfn>Permitted content</dfn> None, this is a void element.</li>
  <li><dfn>Tag omission</dfn> As it is a void element, the <span title="syntax-start-tag">start tag</span> must be present and the <span title="syntax-end-tag">end tag</span> must not be present</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accept metadata elements. If {{htmlattrxref("itemprop", "link")}} is present: any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLLinkElement")}}</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<dl>
  <dt>
    {{htmlattrdef("charset")}}{{obsolete_inline}}</dt>
  <dd>
    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 class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. The default value is ISO-8859-1.
    <div class="note">
      <strong>Usage note: </strong>This attribute is obsolete in HTML5 and <span style="font-weight: bold;">must</span><strong> not be used by authors</strong>. To achieve its effect, use the <span style="font-family: Courier New;">Content-Type:</span> HTTP header on the linked resource.</div>
  </dd>
  <dt>
    {{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt>
  <dd>
    This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled images</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are:
    <dl>
      <dt>
        anonymous</dt>
      <dd>
        A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd>
      <dt>
        use-credentials</dt>
      <dd>
        A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd>
    </dl>
    When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd>
  <dt>
    {{htmlattrdef("disabled")}} {{Non-standard_inline}}</dt>
  <dd>
    This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships.
    <div class="note">
      <p><strong>Note: </strong>While there is no <code>disabled</code> attribute in the HTML standard, there <strong>is</strong> a <code>disabled</code> attribute on the <code>HTMLLinkElement</code> DOM object.</p>
      <p>The use of <code>disabled</code> as an HTML attribute is non-standard and only used by some Microsoft browsers. <span style="font-weight: bold;">Do not use it</span>. To achieve a similar effect, use one of the following techniques:</p>
      <ul>
        <li>If the <code>disabled</code> attribute has been added directly to the element on the page, do not include the {{HTMLElement("link")}} element instead;</li>
        <li>Set the <code>disabled</code> <strong>property</strong> of the DOM object via scripting.</li>
      </ul>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("href")}}</dt>
  <dd>
    This attribute specifies the <a href="/en-US/docs/URIs_and_URLs" title="https://developer.mozilla.org/en/URIs_and_URLs">URL</a> of the linked resource. A URL might be absolute or relative.</dd>
  <dt>
    {{htmlattrdef("hreflang")}}</dt>
  <dd>
    This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> for HTML5 and by <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> for HTML 4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.</dd>
  <dt>
    {{htmlattrdef("media")}}</dt>
  <dd>
    This attribute specifies the media which the linked resource applies to. Its value must be a <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a>. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.<br />
    <div class="note">
      <strong>Usage note: </strong>
      <ul>
        <li>In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., <a href="/en-US/docs/CSS/@media" title="https://developer.mozilla.org/en/CSS/@media">media types and groups</a>, where defined and allowed as values for this attribute, such as <span style="font-family: Courier New;">print</span>, <span style="font-family: Courier New;">screen</span>, <span style="font-family: Courier New;">aural</span>, <span style="font-family: Courier New;">braille.</span> HTML5 extended this to any kind of <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media queries</a>, which are a superset of the allowed values of HTML 4.</li>
        <li>Browsers not supporting the <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">CSS3 Media Queries</a> won't necessary recognized the adequate link; do not forget to set fallback links,&nbsp; the restricted set of media queries defined in HTML 4.</li>
      </ul>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
  <dd>
    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. See <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow" target="_blank" title="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a>.</dd>
  <dt>
    {{htmlattrdef("rel")}}</dt>
  <dd>
    This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the <a href="/en-US/docs/HTML/Link_types" title="HTML/Link types">link types values</a>. The most common use of this attribute is to specify a link to an external style sheet:&nbsp;the <strong>rel</strong> attribute is set to <code>stylesheet</code>, and the <strong>href</strong> attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value <code>next</code> for <strong>rel</strong> to preload the next page in a document series.</dd>
  <dt>
    {{htmlattrdef("rev")}}{{obsolete_inline}}</dt>
  <dd>
    The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{htmlattrxref("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <strong>rel</strong> attribute. <a href="/en-US/docs/HTML/Link_types" title="HTML/Link types">Link types values</a> for the attribute are similar to the possible values for {{htmlattrxref("rel", "link")}}.<br />
    <div class="note">
      <strong>Usage note: </strong>This attribute is obsolete in HTML5. <strong>Do not use it</strong>. To achieve its effect, use the {{htmlattrxref("rel", "link")}} attribute with the opposite <a href="/en-US/docs/HTML/Link_types" title="HTML/Link types">link types values</a>, e.g. <span style="font-family: Courier New;">made</span> should be replaced by <span style="font-family: Courier New;">author</span>. Also this attribute doesn't mean <em>revision</em> and must not be used with a version number, which is unfortunately the case on numerous sites.</div>
  </dd>
  <dt>
    {{htmlattrdef("sizes")}} {{HTMLVersionInline(5)}}</dt>
  <dd>
    This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{htmlattrxref("rel","link")}} contains the <span style="font-family: Courier New;">icon</span> <a href="/en-US/docs/HTML/Link_types" title="HTML/Link types">link types value</a>. It may have the following values:
    <ul>
      <li><span style="font-family: Courier New;">any</span>, meaning that the icon can be scaled to any size as it is in a vectorial format, like <span style="font-family: Courier New;">image/svg</span>.</li>
      <li>a white-space separated list of sizes, each in the format <span style="font-family: Courier New;"><em>&lt;width in pixels&gt;</em>x<em>&lt;height in pixels&gt;</em></span> or <span style="font-family: Courier New;"><em>&lt;width in pixels&gt;</em>X<em>&lt;height in pixels&gt;</em></span>. Each of these sizes must be contained in the resource.</li>
    </ul>
    <div class="note">
      <strong>Usage note: </strong>
      <ul>
        <li>Most icon format are only able to store one single icon; therefore most of the time the {{htmlattrxref("sizes")}} contains only one entry. Among the major browsers, only the Apple's ICNS format allows the storage of multiple icons, and this format is only supported in WebKit.</li>
        <li>Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard <a href="/en-US/docs/HTML/Link_types" title="HTML/Link types">link types values</a> to define icon to be used as Web Clip or start-up placeholder: <span style="font-family: Courier New;">apple-touch-icon</span> and <span style="font-family: Courier New;">apple-touch-startup-icon</span>.</li>
      </ul>
    </div>
  </dd>
  <dt>
    {{htmlattrdef("target")}}{{Non-standard_inline}}</dt>
  <dd>
    Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd>
  <dt>
    {{htmlattrdef("type")}}</dt>
  <dd>
    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 style sheet linked and the most common current value is <strong>text/css</strong>, which indicates a Cascading Style Sheet format.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Including_a_stylesheet">Including a stylesheet</h3>
<p>To include a stylesheet in a page, use the following syntax:</p>
<pre class="brush: html">
&lt;link href="style.css" rel="stylesheet" type="text/css" media="all"&gt;
</pre>
<h3 id="Providing_alternative_stylesheets">Providing alternative stylesheets</h3>
<p>You can also specify <a href="/en-US/docs/CSS/Alternative_style_sheets" title="Alternative_style_sheets">alternative style sheets</a>.</p>
<p>The user can choose which style sheet to use by choosing it from the View&gt;Page Style menu. This provides a way for users to see multiple versions of a page.</p>
<pre class="brush: html">
&lt;link href="default.css" rel="stylesheet" type="text/css" title="Default Style"&gt;
&lt;link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"&gt;
&lt;link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic"&gt;
</pre>
<h3 id="Stylesheet_load_events">Stylesheet load events</h3>
<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>
<pre class="brush: html">
&lt;script&gt;
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
&lt;/script&gt;

&lt;link rel="stylesheet" href="mystylesheet.css" type="text/css" onload="sheetLoaded()" onerror="sheetError()"&gt;
</pre>
<div class="note">
  <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.</div>
<h2 id="Notes">Notes</h2>
<ul>
  <li>A <code>&lt;link&gt;</code> tag can occur only in the head element; however, there can be multiple occurrences of <code>&lt;link&gt;</code>.</li>
  <li>HTML 3.2 defines only the <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, and <strong>title</strong> attributes for the link element.</li>
  <li>HTML 2 defines the <strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>, <strong>rev</strong>, <strong>title</strong>, and <strong>urn</strong> attributes for the <code>&lt;link&gt;</code> element. The <strong>methods</strong> and <strong>urn</strong> attributes were later removed from the specifications.</li>
  <li>The HTML and XHTML specifications define event handlers for the <code>&lt;link&gt;</code> element, but it is unclear how they would be used.</li>
  <li>Under XHTML 1.0, empty elements such as <code>&lt;link&gt;</code> require a trailing slash: <code>&lt;link /&gt;</code>.</li>
</ul>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-link-element.html#the-link-element', '&lt;link&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'links.html#h-12.3', '&lt;link&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Alternative stylesheets</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop("1.9")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>disabled</code> attribute {{Non-standard_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>methods</code> attribute {{Non-standard_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>4.0</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>sizes</code> attribute</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}} {{bug("441770")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>load</code> and <code>error</code> events</td>
        <td>
          <p>19 (Webkit: 535.23)</p>
          <p>({{webkitbug(38995)}})</p>
        </td>
        <td>{{CompatGeckoDesktop("9.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>11.60</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>crossorigin</code> attribute</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop("18.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Alternative stylesheets</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("2.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>disabled</code> attribute {{Non-standard_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>methods</code> attribute {{Non-standard_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>4.0</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>sizes</code> attribute</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}} {{bug("441770")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td><code>load</code> and <code>error</code> events</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("9.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>crossorigin</code></td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("18.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a class="external" href="http://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision