This is revision 1.5612.
link
elementnoscript
element that is a child of a head
element.href
rel
media
hreflang
type
sizes
title
attribute has special semantics on this element.interface HTMLLinkElement : HTMLElement {
attribute boolean disabled;
attribute DOMString href;
attribute DOMString rel;
readonly attribute DOMTokenList relList;
attribute DOMString media;
attribute DOMString hreflang;
attribute DOMString type;
[PutForwards=value] readonly attribute DOMSettableTokenList sizes;
};
HTMLLinkElement implements LinkStyle;
The link
element allows authors to link their
document to other resources.
The destination of the link(s) is given by the href
attribute, which must
be present and must contain a valid non-empty URL potentially
surrounded by spaces. If the href
attribute is absent, then the
element does not define a link.
A link
element must have rel
attribute.
The types of link indicated (the relationships) are given by the
value of the rel
attribute, which, if present, must have a value that is a set
of space-separated tokens. The allowed
keywords and their meanings are defined in a later
section. If the rel
attribute is absent, has no
keywords, or if none of the keywords used are allowed according to
the definitions in this specification, then the element does not
create any links.
Two categories of links can be created using the
link
element: Links to external resources and hyperlinks. The link
types section defines whether a particular link type is an
external resource or a hyperlink. One link
element can
create multiple links (of which some might be external resource
links and some might be hyperlinks); exactly which and how many
links are created depends on the keywords given in the rel
attribute. User agents must process
the links on a per-link basis, not a per-element basis.
Each link created for a link
element is
handled separately. For instance, if there are two link
elements with rel="stylesheet"
, they each
count as a separate external resource, and each is affected by its
own attributes independently. Similarly, if a single
link
element has a rel
attribute with the value next stylesheet
, it creates both a
hyperlink (for the next
keyword) and an external resource link (for the stylesheet
keyword), and they are
affected by other attributes (such as media
or title
) differently.
For example, the following link
element creates two
hyperlinks (to the same page):
<link rel="author license" href="/about">
The two links created by this element are one whose semantic is that the target page has information about the current page's author, and one whose semantic is that the target page has information regarding the license under which the current page is provided.
The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type. Some of the attributes control whether or not the external resource is to be applied (as defined below).
For external resources that are represented in the DOM (for example, style sheets), the DOM representation must be made available even if the resource is not applied. To obtain the resource, the user agent must run the following steps:
If the href
attribute's
value is the empty string, then abort these steps.
Resolve the
URL given by the href
attribute, relative to the
element.
If the previous step fails, then abort these steps.
Fetch the resulting absolute URL.
User agents may opt to only try to obtain such resources when they are needed, instead of pro-actively fetching all the external resources that are not applied.
The semantics of the protocol used (e.g. HTTP) must be followed when fetching external resources. (For example, redirects will be followed and 404 responses will cause the external resource to not be applied.)
Once the attempts to obtain the resource and its critical
subresources are complete, the user agent must, if the loads
were successful, queue a task to fire a simple
event named load
at the
link
element, or, if the resource or one of its
critical subresources failed to completely load for any
reason (e.g. DNS error, HTTP 404 response, a connection being
prematurely closed, unsupported Content-Type), queue a
task to fire a simple event named error
at the link
element. Non-network errors in processing the resource or its
subresources (e.g. CSS parse errors, PNG decoding errors) are not
failures for the purposes of this paragraph.
The task source for these tasks is the DOM manipulation task source.
The element must delay the load event of the element's document until all the attempts to obtain the resource and its critical subresources are complete. (Resources that the user agent has not yet attempted to obtain, e.g. because it is waiting for the resource to be needed, do not delay the load event.)
Interactive user agents may provide users with a
means to follow the
hyperlinks created using the link
element,
somewhere within their user interface. The exact interface is not
defined by this specification, but it could include the following
information (obtained from the element's attributes, again as
defined below), in some form or another (possibly simplified), for
each hyperlink created with each link
element in the
document:
rel
attribute)title
attribute).href
attribute).hreflang
attribute).media
attribute).User agents could also include other information, such as the
type of the resource (as given by the type
attribute).
Hyperlinks created with the link
element and its rel
attribute
apply to the whole page. This contrasts with the rel
attribute of a
and area
elements, which indicates the type of a link
whose context is given by the link's location within the
document.
The media
attribute says which media the resource applies to. The value must
be a valid media query.
If the link is a hyperlink then the media
attribute is purely advisory,
and describes for which media the document in question was
designed.
However, if the link is an external resource link,
then the media
attribute is
prescriptive. The user agent must apply the external resource when
the media
attribute's value
matches the environment and the other relevant
conditions apply, and must not apply it otherwise.
The external resource might have further
restrictions defined within that limit its applicability. For
example, a CSS style sheet might have some @media
blocks. This specification does not override
such further restrictions or requirements.
The default, if the media
attribute is omitted, is "all
", meaning that by default links apply to all
media.
The hreflang
attribute on the link
element has the same semantics as
the hreflang
attribute on a
and area
elements.
The type
attribute
gives the MIME type of the linked resource. It is
purely advisory. The value must be a valid MIME
type.
For external resource
links, the type
attribute
is used as a hint to user agents so that they can avoid fetching
resources they do not support. If the attribute
is present, then the user agent must assume that the resource is of
the given type (even if that is not a valid MIME type,
e.g. the empty string). If the attribute is omitted, but the
external resource link type has a default type defined, then the
user agent must assume that the resource is of that type. If the UA
does not support the given MIME type for the given link
relationship, then the UA should not obtain the resource; if the UA
does support the given MIME type for the given link
relationship, then the UA should obtain the resource at the
appropriate time as specified for the external resource
link's particular type. If the attribute is omitted, and the
external resource link type does not have a default type defined,
but the user agent would obtain the resource if the type
was known and supported, then the user agent should obtain the resource under the
assumption that it will be supported.
User agents must not consider the type
attribute authoritative —
upon fetching the resource, user agents must not use the type
attribute to determine its actual
type. Only the actual type (as defined in the next paragraph) is
used to determine whether to apply the resource, not the
aforementioned assumed type.
If the external resource link type defines rules for processing the resource's Content-Type metadata, then those rules apply. Otherwise, if the resource is expected to be an image, user agents may apply the image sniffing rules, with the official type being the type determined from the resource's Content-Type metadata, and use the resulting sniffed type of the resource as if it was the actual type. Otherwise, if neither of these conditions apply or if the user agent opts not to apply the image sniffing rules, then the user agent must use the resource's Content-Type metadata to determine the type of the resource. If there is no type metadata, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type.
The stylesheet
link type defines rules for processing the resource's Content-Type metadata.
Once the user agent has established the type of the resource, the user agent must apply the resource if it is of a supported type and the other relevant conditions apply, and must ignore the resource otherwise.
If a document contains style sheet links labeled as follows:
<link rel="stylesheet" href="A" type="text/plain"> <link rel="stylesheet" href="B" type="text/css"> <link rel="stylesheet" href="C">
...then a compliant UA that supported only CSS style sheets
would fetch the B and C files, and skip the A file (since
text/plain
is not the MIME type for CSS style
sheets).
For files B and C, it would then check the actual types returned
by the server. For those that are sent as text/css
, it
would apply the styles, but for those labeled as
text/plain
, or any other type, it would not.
If one of the two files was returned without a
Content-Type metadata, or with a syntactically
incorrect type like Content-Type: "null"
, then the default type
for stylesheet
links would kick
in. Since that default type is text/css
, the
style sheet would nonetheless be applied.
The title
attribute gives the title of the link. With one exception, it is
purely advisory. The value is text. The exception is for style sheet
links, where the title
attribute defines alternative style sheet sets.
The title
attribute on link
elements differs from the global
title
attribute of most other
elements in that a link without a title does not inherit the title
of the parent element: it merely has no title.
The sizes
attribute is used
with the icon
link type. The attribute
must not be specified on link
elements that do not have
a rel
attribute that specifies
the icon
keyword.
HTTP Link:
header fields, if
supported, must be assumed to come before any links in the document,
in the order that they were given in the HTTP message. These header
fields are to be processed according to the rules given in the
relevant specifications. [HTTP] [WEBLINK]
Registration of relation types in HTTP Link: header fields is distinct from HTML link types, and thus their semantics can be different from same-named HTML types.
The IDL attributes href
, rel
, media
, hreflang
, type
, and sizes
each must
reflect the respective content attributes of the same
name.
The IDL attribute relList
must reflect the rel
content attribute.
The IDL attribute disabled
only applies
to style sheet links. When the link
element defines a
style sheet link, then the disabled
attribute behaves as
defined for the alternative
style sheets DOM. For all other link
elements it
always return false and does nothing on setting.
The LinkStyle
interface is also implemented by
this element; the styling processing model defines
how. [CSSOM]
Here, a set of link
elements provide some style
sheets:
<!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- the preferred alternate style sheet --> <link rel="stylesheet" href="green.css" title="Green styles"> <!-- some alternate style sheets --> <link rel="alternate stylesheet" href="contrast.css" title="High contrast"> <link rel="alternate stylesheet" href="big.css" title="Big fonts"> <link rel="alternate stylesheet" href="wide.css" title="Wide screen">
The following example shows how you can specify versions of the page that use alternative formats, are aimed at other languages, and that are intended for other media:
<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"> <link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"> <link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"> <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"> <link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"> <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">