HTML - <link>

The HTML <link> element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.

Examples

Including a stylesheet

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

HTML
<link href="style.css" rel="stylesheet">

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.

HTML
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" 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:

HTML
<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" 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.

Description  

The HTML <link> element specifies relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.

The rel can be set to a lot of different values. They are listed in a separate page.

Content categories Metadata content. If itemprop is present: flow content and phrasing content
Permitted content None, it is an empty 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 accepts metadata elements. If itemprop is present: any element that accepts phrasing content.
DOM interface HTMLLinkElement

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Alternative stylesheets ? 3.0 (1.9) ? (Yes) ?
disabled attribute No support No support (Yes) No support No support
methods attribute No support No support 4.0 No support No support
sizes attribute No support No support bug 441770 No support No support No support
load and error events

19 (Webkit: 535.23)

(WebKit bug 38995)

9.0 (9.0) ? 11.60 ?
crossorigin attribute 25 18.0 (18.0) ? 15 ?
integrity attribute 45.0       No support[1]
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) 1.0 (1.0) (Yes) (Yes) (Yes) (Yes)
Alternative stylesheets ? ? 4.0 (2.0) ? ? ? ?
disabled attribute No support ? No support ? No support No support ?
methods attribute No support ? No support 4.0 No support No support ?
sizes attribute No support ? No support bug 441770 No support No support No support ?
load and error events ? ? 9.0 (9.0) ? ? ? ?
crossorigin attribute ? ? 18.0 (18.0) ? ? ? ?
integrity attribute No support 45.0         45.0

[1] WebKit bug 148363 tracks WebKit implementation of Subresource Integrity (which includes the integrity attribute).

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 />.

See Also  

Specifications  

Specification Status Comment
Subresource Integrity
The definition of '<script>' in that specification.
Recommendation Added the integrity attribute.
WHATWG HTML Living Standard
The definition of '<link>' in that specification.
Living Standard No changes from latest snapshot
HTML5
The definition of '<link>' in that specification.
Recommendation Added crossorigin and sizes attributes; extended values of media to any media queries; added numerous new values for rel.
HTML 4.01 Specification
The definition of '<link>' in that specification.
Recommendation  

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/link

Element HTML HTML document metadata metadata Reference Web