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:
<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.
<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:
<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()">
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.
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) |
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