search
element with form functionality — Last Updated 1 December 2021a
and area
elementsa
and area
elementsalternate
"author
"bookmark
"canonical
"dns-prefetch
"external
"help
"icon
"license
"manifest
"modulepreload
"nofollow
"noopener
"noreferrer
"opener
"pingback
"preconnect
"prefetch
"preload
"prerender
"search
"stylesheet
"tag
"Links are a conceptual construct, created by a
, area
,
form
, search
,
and link
elements, that represent
a connection between two resources, one of which is the current Document
. There are
two kinds of links in HTML:
These are links to resources that are to be used to augment the current document, generally automatically processed by the user agent. All external resource links have a fetch and process the linked resource algorithm which describes how the resource is obtained.
These are links to other resources that are generally exposed to the user by the user agent so that the user can cause the user agent to navigate to those resources, e.g. to visit them in a browser or download them.
For link
elements with an href
attribute and a
rel
attribute, links must be created for the keywords of the
rel
attribute, as defined for those keywords in the link types section.
Similarly, for a
and area
elements with an href
attribute and a rel
attribute, links must be created for the keywords of the
rel
attribute as defined for those keywords in the link types section. Unlike link
elements, however,
a
and area
elements with an href
attribute that either do not have a rel
attribute, or
whose rel
attribute has no keywords that are defined as
specifying hyperlinks, must also create a hyperlink.
This implied hyperlink has no special meaning (it has no link type)
beyond linking the element's node document to the resource given by the element's href
attribute.
Similarly, for forms
with a rel
attribute, links must be created for the keywords of the rel
attribute as defined for those keywords in the link types section.
forms
that do not have a rel
attribute,
or whose rel
attribute has no keywords that are defined as
specifying hyperlinks, must also create a hyperlink.
A hyperlink can have one or more hyperlink annotations that modify the processing semantics of that hyperlink.
a
and area
elementsThe href
attribute on a
and area
elements must have a value that is a valid
URL potentially surrounded by spaces.
The href
attribute on a
and
area
elements is not required; when those elements do not have href
attributes they do not create hyperlinks.
The target
attribute, if present, must be a valid browsing context name or keyword. It gives the
name of the browsing context that will be used.
When an a
or area
element's activation behavior is
invoked, the user agent may allow the user to indicate a preference regarding whether the
hyperlink is to be used for navigation or whether the resource it
specifies is to be downloaded.
In the absence of a user preference, the default should be navigation if the element has no
download
attribute, and should be to download the
specified resource if it does.
Whether determined by the user's preferences or via the presence or absence of the attribute, if the decision is to use the hyperlink for navigation then the user agent must follow the hyperlink, and if the decision is to use the hyperlink to download a resource, the user agent must download the hyperlink. These terms are defined in subsequent sections below.
The download
attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. The attribute may have a value; the
value, if any, specifies the default filename that the author recommends for use in labeling the
resource in a local file system. There are no restrictions on allowed values, but authors are
cautioned that most file systems have limitations with regard to what punctuation is supported in
filenames, and user agents are likely to adjust filenames accordingly.
Support in all current engines.
The ping
attribute, if present, gives the URLs of the
resources that are interested in being notified if the user follows the hyperlink. The value must
be a set of space-separated tokens, each of which must be a valid non-empty
URL whose scheme is an HTTP(S)
scheme.
Support in all current engines.
The rel
attribute on a
and area
elements controls what kinds of links the elements create. The attribute's value must be an
unordered set of unique space-separated tokens. The allowed
keywords and their meanings are defined below.
rel
's supported tokens are the keywords defined in HTML link types which are allowed on a
and area
elements, impact the processing model, and are supported by the user agent. The possible supported tokens are noreferrer
, noopener
, and opener
. rel
's supported tokens must only include the tokens from this
list that the user agent implements the processing model for.
The rel
attribute has no default value. If the
attribute is omitted or if none of the values in the attribute are recognized by the user agent,
then the document has no particular relationship with the destination resource other than there
being a hyperlink between the two.
The hreflang
attribute on a
elements that create hyperlinks, if
present, gives the language of the linked resource. It is purely advisory. The value must be a
valid BCP 47 language tag. [BCP47]
The type
attribute, if present, gives the MIME type of the linked resource. It is purely
advisory. The value must be a valid MIME type string.
The referrerpolicy
attribute is a referrer
policy attribute. Its purpose is to set the referrer policy used when
following hyperlinks. [REFERRERPOLICY]
a
and area
elementshyperlink.toString()
hyperlink.href
Returns the hyperlink's URL.
Can be set, to change the URL.
hyperlink.origin
Returns the hyperlink's URL's origin.
hyperlink.protocol
Returns the hyperlink's URL's scheme.
Can be set, to change the URL's scheme.
hyperlink.username
Returns the hyperlink's URL's username.
Can be set, to change the URL's username.
hyperlink.password
Returns the hyperlink's URL's password.
Can be set, to change the URL's password.
hyperlink.host
Returns the hyperlink's URL's host and port (if different from the default port for the scheme).
Can be set, to change the URL's host and port.
hyperlink.hostname
Returns the hyperlink's URL's host.
Can be set, to change the URL's host.
hyperlink.port
Returns the hyperlink's URL's port.
Can be set, to change the URL's port.
hyperlink.pathname
Returns the hyperlink's URL's path.
Can be set, to change the URL's path.
hyperlink.search
Returns the hyperlink's URL's query (includes leading "?
" if
non-empty).
Can be set, to change the URL's query (ignores leading "?
").
hyperlink.hash
Returns the hyperlink's URL's fragment (includes leading "#
" if
non-empty).
Can be set, to change the URL's fragment (ignores leading "#
").
Support in all current engines.
In some cases, resources are intended for later use rather than immediate viewing. To indicate
that a resource is intended to be downloaded for use later, rather than immediately used, the
download
attribute can be specified on the
a
or area
element that creates the hyperlink to that
resource.
The attribute can furthermore be given a value, to specify the filename that user agents are
to use when storing the resource in a file system. This value can be overridden by the `Content-Disposition
` HTTP header's filename parameters.
[RFC6266]
In cross-origin situations, the download
attribute has to be combined with the `Content-Disposition
` HTTP header, specifically with the
attachment
disposition type, to avoid the user being warned of possibly
nefarious activity. (This is to protect users from being made to download sensitive personal or
confidential information without their full understanding.)
The ping
attribute is redundant with pre-existing
technologies like HTTP redirects and JavaScript in allowing web pages to track which off-site
links are most popular or allowing advertisers to track click-through rates.
However, the ping
attribute provides these advantages
to the user over those alternatives:
Thus, while it is possible to track users without this feature, authors are encouraged to use
the ping
attribute so that the user agent can make the
user experience more transparent.
Ping-From
` and `Ping-To
` headersThe `Ping-From
` and `Ping-To
` HTTP request headers are included in hyperlink
auditing requests. Their value is a URL, serialized.
Support in all current engines.
The following table summarizes the link types that are defined by this specification, by their corresponding keywords. This table is non-normative; the actual definitions for the link types are given in the next few sections.
In this section, the term referenced document refers to the resource identified by the element representing the link, and the term current document refers to the resource within which the element representing the link finds itself.
Except where otherwise specified, a keyword must not be specified more than once per rel
attribute.
Some of the sections that follow the table below list synonyms for certain keywords. The
indicated synonyms must
not be used in documents (for example, the keyword "copyright
").
Keywords are always ASCII case-insensitive.
Thus, rel="next"
is the same as rel="NEXT"
.
Keywords that are body-ok affect whether link
elements are
allowed in the body. The body-ok keywords are
dns-prefetch
,
modulepreload
,
pingback
,
preconnect
,
prefetch
,
preload
,
prerender
, and
stylesheet
.
New link types that are to be implemented by web browsers are to be added to this standard. The remainder can be registered as extensions.
Link type | Effect on... | body-ok | Brief description | ||
---|---|---|---|---|---|
link | a and area | form | |||
alternate | Hyperlink | not allowed | · | Gives alternate representations of the current document. | |
canonical | Hyperlink | not allowed | · | Gives the preferred URL for the current document. | |
author | Hyperlink | not allowed | · | Gives a link to the author of the current document or article. | |
bookmark | not allowed | Hyperlink | not allowed | · | Gives the permalink for the nearest ancestor section. |
dns-prefetch | External Resource | not allowed | Yes | Specifies that the user agent should preemptively perform DNS resolution for the target resource's origin. | |
external | not allowed | Annotation | · | Indicates that the referenced document is not part of the same site as the current document. | |
help | Hyperlink | · | Provides a link to context-sensitive help. | ||
icon | External Resource | not allowed | · | Imports an icon to represent the current document. | |
manifest | External Resource | not allowed | · | Imports or links to an application manifest. [MANIFEST] | |
modulepreload | External Resource | not allowed | Yes | Specifies that the user agent must preemptively fetch the module script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well. | |
license | Hyperlink | · | Indicates that the main content of the current document is covered by the copyright license described by the referenced document. | ||
next | Hyperlink | · | Indicates that the current document is a part of a series, and that the next document in the series is the referenced document. | ||
nofollow | not allowed | Annotation | · | Indicates that the current document's original author or publisher does not endorse the referenced document. | |
noopener | not allowed | Annotation | · | Creates a top-level browsing context that is not an auxiliary
browsing context if the hyperlink would create either of those to begin with (i.e., has
an appropriate target attribute value). | |
noreferrer | not allowed | Annotation | · | No `Referer ` (sic) header will be included.
Additionally, has the same effect as noopener . | |
opener | not allowed | Annotation | · | Creates an auxiliary browsing context if the hyperlink would otherwise create
a top-level browsing context that is not an auxiliary browsing
context (i.e., has "_blank " as target attribute value). | |
pingback | External Resource | not allowed | Yes | Gives the address of the pingback server that handles pingbacks to the current document. | |
preconnect | External Resource | not allowed | Yes | Specifies that the user agent should preemptively connect to the target resource's origin. | |
prefetch | External Resource | not allowed | Yes | Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. | |
preload | External Resource | not allowed | Yes | Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). | |
prerender | External Resource | not allowed | Yes | Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future. | |
prev | Hyperlink | · | Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document. | ||
search | Hyperlink | · | Gives a link to a resource that can be used to search through the current document and its related pages. | ||
stylesheet | External Resource | not allowed | Yes | Imports a style sheet. | |
tag | not allowed | Hyperlink | not allowed | · | Gives a tag (identified by the given address) that applies to the current document. |
alternate
"Support in one engine only.
The alternate
keyword may be used with link
,
a
, and area
elements.
The meaning of this keyword depends on the values of the other attributes.
link
element and the rel
attribute also contains the keyword stylesheet
The alternate
keyword modifies the meaning of the stylesheet
keyword in the way described for that keyword. The
alternate
keyword does not create a link of its own.
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" >
alternate
keyword is used with the type
attribute set to the value application/rss+xml
or the value application/atom+xml
The keyword creates a hyperlink referencing a syndication feed (though not necessarily syndicating exactly the same content as the current page).
The following link
elements give syndication feeds for a blog:
< link rel = "alternate" type = "application/atom+xml" href = "posts.xml" title = "Cool Stuff Blog" >
< link rel = "alternate" type = "application/atom+xml" href = "posts.xml?category=robots" title = "Cool Stuff Blog: robots category" >
< link rel = "alternate" type = "application/atom+xml" href = "comments.xml" title = "Cool Stuff Blog: Comments" >
Such link
elements would be used by user agents engaged in feed autodiscovery,
with the first being the default (where applicable).
The following example offers various different syndication feeds to the user, using
a
elements:
< p > You can access the planets database using Atom feeds:</ p >
< ul >
< li >< a href = "recently-visited-planets.xml" rel = "alternate" type = "application/atom+xml" > Recently Visited Planets</ a ></ li >
< li >< a href = "known-bad-planets.xml" rel = "alternate" type = "application/atom+xml" > Known Bad Planets</ a ></ li >
< li >< a href = "unexplored-planets.xml" rel = "alternate" type = "application/atom+xml" > Unexplored Planets</ a ></ li >
</ ul >
These links would not be used in feed autodiscovery.
The keyword creates a hyperlink referencing an alternate representation of the current document.
The nature of the referenced document is given by the hreflang
, and type
attributes.
If the alternate
keyword is used with the hreflang
attribute, and that attribute's value differs
from the document element's language, it indicates that the referenced
document is a translation.
If the alternate
keyword is used with the type
attribute, it indicates that the referenced document is
a reformulation of the current document in the specified format.
The hreflang
and type
attributes can be combined when specified with the alternate
keyword.
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" >
This relationship is transitive — that is, if a document links to two other documents
with the link type "alternate
", then, in addition to implying
that those documents are alternative representations of the first document, it is also implying
that those two documents are alternative representations of each other.
author
"The author
keyword may be used with link
,
a
, and area
elements. This keyword creates a hyperlink.
For a
and area
elements, the author
keyword indicates that the referenced document provides further information about the author of
the nearest article
element ancestor of the element defining the hyperlink, if there
is one, or of the page as a whole, otherwise.
For link
elements, the author
keyword indicates
that the referenced document provides further information about the author for the page as a
whole.
The "referenced document" can be, and often is, a mailto:
URL giving the email address of the author. [MAILTO]
bookmark
"The bookmark
keyword may be used with a
and
area
elements. This keyword creates a hyperlink.
The bookmark
keyword gives a permalink for the nearest
ancestor article
element of the linking element in question, or of the section the linking element is most closely associated with, if
there are no ancestor article
elements.
The following snippet has three permalinks. A user agent could determine which permalink applies to which part of the spec by looking at where the permalinks are given.
...
< body >
< h1 > Example of permalinks</ h1 >
< div id = "a" >
< h2 > First example</ h2 >
< p >< a href = "a.html" rel = "bookmark" > This permalink applies to
only the content from the first H2 to the second H2</ a > . The DIV isn't
exactly that section, but it roughly corresponds to it.</ p >
</ div >
< h2 > Second example</ h2 >
< article id = "b" >
< p >< a href = "b.html" rel = "bookmark" > This permalink applies to
the outer ARTICLE element</ a > (which could be, e.g., a blog post).</ p >
< article id = "c" >
< p >< a href = "c.html" rel = "bookmark" > This permalink applies to
the inner ARTICLE element</ a > (which could be, e.g., a blog comment).</ p >
</ article >
</ article >
</ body >
...
canonical
"The canonical
keyword may be used with link
element. This keyword creates a hyperlink.
The canonical
keyword indicates that URL given by the href
attribute is the preferred URL for the current document. That
helps search engines reduce duplicate content, as described in more detail in The Canonical
Link Relation. [RFC6596]
dns-prefetch
"The dns-prefetch
keyword may be used with
link
elements. This keyword creates an external
resource link. This keyword is body-ok.
The dns-prefetch
keyword indicates that preemptively
performing DNS resolution for the origin of the specified resource is likely to be
beneficial, as it is highly likely that the user will require resources located at that
origin, and the user experience would be improved by preempting the latency costs
associated with DNS resolution. [RESOURCEHINTS]
There is no default type for resources given by the dns-prefetch
keyword.
external
"The external
keyword may be used with a
,
area
, form
, and search
elements. This keyword does not create a
hyperlink, but annotates any other
hyperlinks created by the element (the implied hyperlink, if no other keywords create one).
The external
keyword indicates that the link is leading to a
document that is not part of the site that the current document forms a part of.
help
"The help
keyword may be used with link
,
a
, area
, form
, and search
elements. This keyword creates a
hyperlink.
For a
, area
, form
, and search
elements, the help
keyword indicates that the referenced document provides further help
information for the parent of the element defining the hyperlink, and its children.
In the following example, the form control has associated context-sensitive help. The user agent could use this information, for example, displaying the referenced document if the user presses the "Help" or "F1" key.
< p >< label > Topic: < input name = topic > < a href = "help/topic.html" rel = "help" > (Help)</ a ></ label ></ p >
For link
elements, the help
keyword indicates that
the referenced document provides help for the page as a whole.
For a
and area
elements, on some browsers, the help
keyword causes the link to use a different cursor.
icon
"Support in all current engines.
The icon
keyword may be used with link
elements.
This keyword creates an external resource link.
Icons could be auditory icons, visual icons, or other kinds of icons.
The sizes
keywords represent icon sizes in raw pixels (as
opposed to CSS pixels).
An icon that is 50 CSS pixels wide intended for displays with a device pixel density of two device pixels per CSS pixel (2x, 192dpi) would have a width of 100 raw pixels. This feature does not support indicating that a different resource is to be used for small high-resolution icons vs large low-resolution icons (e.g. 50×50 2x vs 100×100 1x).
The any
keyword represents that the
resource contains a scalable icon, e.g. as provided by an SVG image.
The keywords specified on the sizes
attribute must not
represent icon sizes that are not actually available in the linked resource.
The following snippet shows the top part of an application with several icons.
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > lsForums — Inbox</ title >
< link rel = icon href = favicon.png sizes = "16x16" type = "image/png" >
< link rel = icon href = windows.ico sizes = "32x32 48x48" type = "image/vnd.microsoft.icon" >
< link rel = icon href = mac.icns sizes = "128x128 512x512 8192x8192 32768x32768" >
< link rel = icon href = iphone.png sizes = "57x57" type = "image/png" >
< link rel = icon href = gnome.svg sizes = "any" type = "image/svg+xml" >
< link rel = stylesheet href = lsforums.css >
< script src = lsforums.js ></ script >
< meta name = application-name content = "lsForums" >
</ head >
< body >
...
For historical reasons, the icon
keyword may be preceded by the
keyword "shortcut
". If the "shortcut
" keyword is
present, the rel
attribute's entire value must be an
ASCII case-insensitive match for the string "shortcut icon
" (with a single U+0020 SPACE character between the tokens and
no other ASCII whitespace).
license
"The license
keyword may be used with link
,
a
, area
, form
, and search
elements. This keyword creates a
hyperlink.
The license
keyword indicates that the referenced document
provides the copyright license terms under which the main content of the current document is
provided.
This specification does not specify how to distinguish between the main content of a document and content that is not deemed to be part of that main content. The distinction should be made clear to the user.
Consider a photo sharing site. A page on that site might describe and show a photograph, and the page might be marked up as follows:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Exampl Pictures: Kissat</ title >
< link rel = "stylesheet" href = "/style/default" >
</ head >
< body >
< h1 > Kissat</ h1 >
< nav >
< a href = "../" > Return to photo index</ a >
</ nav >
< figure >
< img src = "/pix/39627052_fd8dcd98b5.jpg" >
< figcaption > Kissat</ figcaption >
</ figure >
< p > One of them has six toes!</ p >
< p >< small >< a rel = "license" href = "http://www.opensource.org/licenses/mit-license.php" > MIT Licensed</ a ></ small ></ p >
< footer >
< a href = "/" > Home</ a > | < a href = "../" > Photo index</ a >
< p >< small > © copyright 2009 Exampl Pictures. All Rights Reserved.</ small ></ p >
</ footer >
</ body >
</ html >
In this case the license
applies to just the photo (the main
content of the document), not the whole document. In particular not the design of the page
itself, which is covered by the copyright given at the bottom of the document. This could be made
clearer in the styling (e.g. making the license link prominently positioned near the photograph,
while having the page copyright in light small text at the foot of the page).
manifest
"Support in one engine only.
The manifest
keyword may be used with link
elements.
This keyword creates an external resource link.
The manifest
keyword indicates the manifest file that provides
metadata associated with the current document.
modulepreload
"Support in one engine only.
The modulepreload
keyword may be used with
link
elements. This keyword creates an external resource link. This
keyword is body-ok.
The modulepreload
keyword is a specialized alternative
to the preload
keyword, with a processing model geared toward
preloading module scripts. In particular, it uses the specific
fetch behavior for module scripts (including, e.g., a different interpretation of the crossorigin
attribute), and places the result into the
appropriate module map for later evaluation. In
contrast, a similar external resource link using the preload
keyword would place the result in the preload cache, without
affecting the document's module map.
Additionally, implementations can take advantage of the fact that module scripts declare their dependencies in order to fetch the specified module's
dependency as well. This is intended as an optimization opportunity, since the user agent knows
that, in all likelihood, those dependencies will also be needed later. It will not generally be
observable without using technology such as service workers, or monitoring on the server side.
Notably, the appropriate load
or error
events will occur after the specified module is fetched, and
will not wait for any dependencies.
Unlike some other link relations, changing the relevant attributes (such as as
, crossorigin
, and
referrerpolicy
) of such a link
does not trigger a new fetch. This is because the document's module map has already been populated by a previous
fetch, and so re-fetching would be pointless.
The following snippet shows the top part of an application with several modules preloaded:
<!DOCTYPE html>
< html lang = "en" >
< title > IRCFog</ title >
< link rel = "modulepreload" href = "app.mjs" >
< link rel = "modulepreload" href = "helpers.mjs" >
< link rel = "modulepreload" href = "irc.mjs" >
< link rel = "modulepreload" href = "fog-machine.mjs" >
< script type = "module" src = "app.mjs" >
...
Assume that the module graph for the application is as follows:
Here we see the application developer has used modulepreload
to declare all of the modules in their module graph,
ensuring that the user agent initiates fetches for them all. Without such preloading, the user
agent might need to go through multiple network roundtrips before discovering helpers.mjs
, if technologies such as HTTP/2 Server Push are not in play. In
this way, modulepreload
link
elements can be
used as a sort of "manifest" of the application's modules.
The following code shows how modulepreload
links can
be used in conjunction with import()
to ensure network fetching is done ahead of
time, so that when import()
is called, the module is already ready (but not
evaluated) in the module map:
< link rel = "modulepreload" href = "awesome-viewer.mjs" >
< button onclick = "import('./awesome-viewer.mjs').then(m => m.view())" >
View awesome thing
</ button >
nofollow
"The nofollow
keyword may be used with a
,
area
, form
, and search
elements. This keyword does not create a
hyperlink, but annotates any other
hyperlinks created by the element (the implied hyperlink, if no other keywords create one).
The nofollow
keyword indicates that the link is not endorsed
by the original author or publisher of the page, or that the link to the referenced document was
included primarily because of a commercial relationship between people affiliated with the two
pages.
noopener
"Support in all current engines.
Support in all current engines.
The noopener
keyword may be used with a
,
area
, form
, and search
elements. This keyword does not create a
hyperlink, but annotates any other
hyperlinks created by the element (the implied hyperlink, if no other keywords create one).
The keyword indicates that any newly created top-level browsing context which
results from following the hyperlink will not be an auxiliary browsing
context. E.g., its window.opener
attribute will be
null.
This typically creates an auxiliary browsing context (assuming there is no
existing browsing context whose browsing context name is
"example
"):
< a href = help.html target = example > Help!</ a >
This creates a top-level browsing context that is not an auxiliary browsing context (assuming the same thing):
< a href = help.html target = example rel = noopener > Help!</ a >
These are equivalent and only navigate the parent browsing context:
< a href = index.html target = _parent > Home</ a >
< a href = index.html target = _parent rel = noopener > Home</ a >
noreferrer
"Support in all current engines.
Support in all current engines.
The noreferrer
keyword may be used with a
,
area
, form
, and search
elements. This keyword does not create a
hyperlink, but annotates any other
hyperlinks created by the element (the implied hyperlink, if no other keywords create one).
It indicates that no referrer information is to be leaked when following the link and also
implies the noopener
keyword behavior under the same
conditions.
<a href="..." rel="noreferrer" target="_blank">
has the same behavior as <a href="..." rel="noreferrer noopener" target="_blank">
.
opener
"The opener
keyword may be used with a
,
area
, form
, and search
elements. This keyword does not create a
hyperlink, but annotates any other
hyperlinks created by the element (the implied hyperlink, if no other keywords create one).
The keyword indicates that any newly created top-level browsing context which results from following the hyperlink will be an auxiliary browsing context.
In the following example the opener
is used to allow the help
page popup to navigate its opener, e.g., in case what the user is looking for can be found
elsewhere. An alternative might be to use a named target, rather than _blank
, but this has the potential to clash with existing names.
< a href = "..." rel = opener target = _blank > Help!</ a >
pingback
"The pingback
keyword may be used with link
elements. This keyword creates an external resource
link. This keyword is body-ok.
For the semantics of the pingback
keyword, see Pingback
1.0. [PINGBACK]
preconnect
"Support in all current engines.
The preconnect
keyword may be used with link
elements. This keyword creates an external resource
link. This keyword is body-ok.
The preconnect
keyword indicates that preemptively
initiating a connection to the origin of the specified resource is likely to be
beneficial, as it is highly likely that the user will require resources located at that
origin, and the user experience would be improved by preempting the latency costs
associated with establishing the connection. [RESOURCEHINTS]
There is no default type for resources given by the preconnect
keyword.
prefetch
"The prefetch
keyword may be used with link
elements. This keyword creates an external resource
link. This keyword is body-ok.
The prefetch
keyword indicates that preemptively fetching and caching the specified resource is likely to be
beneficial, as it is highly likely that the user will require this resource for future
navigations.
[RESOURCEHINTS]
There is no default type for resources given by the prefetch
keyword.
preload
"Support in one engine only.
The preload
keyword may be used with link
elements. This keyword creates an external resource
link. This keyword is body-ok.
The preload
keyword indicates that the user agent will
preemptively fetch and cache the specified resource according
to the potential destination given by the
as
attribute (and the priority associated with the corresponding destination), as it is highly likely that the user
will require this resource for the current navigation. [PRELOAD]
There is no default type for resources given by the preload
keyword.
A Document
has a map of preloaded resources, which is a
map, initially empty.
A preload key is a struct. It has the following items:
same-origin
", "cors
", or
"no-cors
"
A preload entry is a struct. It has the following items:
To consume a preloaded resource for Window
window,
given a URL url, a string destination, a string
mode, a string credentialsMode, a string integrityMetadata, and
onResponseAvailable, which is an algorithm accepting a response:
Let key be a preload key whose URL is url, destination is destination, integrity metadata is integrityMetadata, mode is mode, and credentials mode is credentialsMode.
Let preloads be window's associated Document
's map of
preloaded resources.
If key does not exist in preloads, then return false.
Let entry be preloads[key].
Remove preloads[key].
If entry response is null, then set entry's on response available to onResponseAvailable.
Otherwise, call onResponseAvailable with entry's response.
Return true.
The fetch and process the linked resource steps for this type of linked resource,
given a link
element el, are:
Let as be the current state of el's as
attribute.
If as does not represent a state, return false.
Let request be the result of creating a link
element request given el and the result
of translating
as.
If request is null, then return.
If as is "image
", then:
Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source given el, respectively.
If selected source is null, then return false.
Parse selected source, relative to el's node document. If that fails, then return false. Otherwise, let url be the resulting URL record.
Set request's URL to url.
Let preloadKey be a preload key whose URL is request's URL, destination is request's destination, integrity metadata is request's integrity metadata, mode is request's mode, and credentials mode is request's credentials mode.
Let preloadEntry be a new preload entry.
Set el's node document's map of preloaded resources[preloadKey] to preloadEntry.
Fetch request, with processResponseEndOfBody set to the following steps given response response and null or byte sequence bytesOrNull:
If bytesOrNull is a byte sequence, then set response's body to the first return value of safely extracting bytesOrNull.
By using processResponseEndOfBody, we have extracted the entire body. This is necessary to ensure the preloader loads the entire body from the network, regardless of whether the preload will be consumed (which is uncertain at this point). This step then resets the request's body to a new body containing the same bytes, so that other specifications can read from it at the time of actual consumption, despite us having already done so once.
Otherwise, set response to a network error.
Finalize and report timing with response, given el's
relevant global object and "link
".
Fire an event named load
at el.
If preloadEntry's on response available is null, then set preloadEntry's response to response.
Otherwise, call preloadEntry's on response available with response.
prerender
"Support in one engine only.
The prerender
keyword may be used with link
elements. This keyword creates an external resource
link. This keyword is body-ok.
The prerender
keyword indicates that the specified resource
might be required by the next navigation, and so it may be beneficial to not only preemptively
fetch the resource, but also to process it, e.g. by fetching its subresources or performing some rendering.
[RESOURCEHINTS]
There is no default type for resources given by the prerender
keyword.
search
"The search
keyword may be used with link
,
a
, area
, form
, and search
elements. This keyword creates a hyperlink.
The search
keyword indicates that the referenced document
provides an interface specifically for searching the document and its related resources.
OpenSearch description documents can be used with link
elements and
the search
link type to enable user agents to autodiscover search
interfaces. [OPENSEARCH]
stylesheet
"The stylesheet
keyword may be used with link
elements. This keyword creates an external resource
link that contributes to the styling processing model. This keyword is
body-ok.
The specified resource is a CSS style sheet that describes how to present the document.
If the alternate
keyword is also specified on the
link
element, then the link is an
alternative style sheet; in this case, the title
attribute
must be specified on the link
element, with a non-empty value.
The default type for resources given by the stylesheet
keyword is text/css
.
tag
"The tag
keyword may be used with a
and
area
elements. This keyword creates a hyperlink.
The tag
keyword indicates that the tag that the
referenced document represents applies to the current document.
Since it indicates that the tag applies to the current document, it would be inappropriate to use this keyword in the markup of a tag cloud, which lists the popular tags across a set of pages.
This document is about some gems, and so it is tagged with "https://en.wikipedia.org/wiki/Gemstone
" to unambiguously categorize it as applying
to the "jewel" kind of gems, and not to, say, the towns in the US, the Ruby package format, or
the Swiss locomotive class:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > My Precious</ title >
</ head >
< body >
< header >< h1 > My precious</ h1 > < p > Summer 2012</ p ></ header >
< p > Recently I managed to dispose of a red gem that had been
bothering me. I now have a much nicer blue sapphire.</ p >
< p > The red gem had been found in a bauxite stone while I was digging
out the office level, but nobody was willing to haul it away. The
same red gem stayed there for literally years.</ p >
< footer >
Tags: < a rel = tag href = "https://en.wikipedia.org/wiki/Gemstone" > Gemstone</ a >
</ footer >
</ body >
</ html >
In this document, there are two articles. The "tag
"
link, however, applies to the whole page (and would do so wherever it was placed, including if it
was within the article
elements).
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Gem 4/4</ title >
</ head >
< body >
< article >
< h1 > 801: Steinbock</ h1 >
< p > The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</ p >
</ article >
< article >
< h1 > 802: Murmeltier</ h1 >
< figure >
< img src = "https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
alt = "The 802 was red with pantographs and tall vents on the side." >
< figcaption > The 802 in the 1980s, above Lago Bianco.</ figcaption >
</ figure >
< p > The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</ p >
</ article >
< p class = "topic" >< a rel = tag href = "https://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4" > Gem 4/4</ a ></ p >
</ body >
</ html >
Some documents form part of a sequence of documents.
A sequence of documents is one where each document can have a previous sibling and a next sibling. A document with no previous sibling is the start of its sequence, a document with no next sibling is the end of its sequence.
A document may be part of multiple sequences.
next
"The next
keyword may be used with link
,
a
, area
, form
, and search
elements. This keyword creates a hyperlink.
The next
keyword indicates that the document is part of a
sequence, and that the link is leading to the document that is the next logical document in the
sequence.
prev
"The prev
keyword may be used with link
,
a
, area
, form
, and search
elements. This keyword creates a hyperlink.
The prev
keyword indicates that the document is part of a
sequence, and that the link is leading to the document that is the previous logical document in
the sequence.
Extensions to the predefined set of link types may be registered on the microformats page for existing rel values. [MFREL]
Anyone is free to edit the microformats page for existing rel values at any time to add a type. Extension types must be specified with the following information:
The actual value being defined. The value should not be confusingly similar to any other defined value (e.g. differing only in case).
If the value contains a U+003A COLON character (:), it must also be an absolute URL.
link
One of the following:
link
elements.link
element; it creates a
hyperlink.link
element; it creates an external
resource link.a
and area
One of the following:
a
and area
elements.a
and area
elements; it creates a
hyperlink.a
and area
elements; it creates
an external resource link.a
and area
elements; it annotates other hyperlinks
created by the element.form
and search
One of the following:
A short non-normative description of what the keyword's meaning is.
A link to a more detailed description of the keyword's semantics and requirements. It could be another page on the wiki, or a link to an external page.
A list of other keyword values that have exactly the same processing requirements. Authors should not use the values defined to be synonyms, they are only intended to allow user agents to support legacy content. Anyone may remove synonyms that are not used in practice; only names that need to be processed as synonyms for compatibility with legacy content are to be registered in this way.
One of the following:
If a keyword is found to be redundant with existing values, it should be removed and listed as a synonym for the existing value.
If a keyword is registered in the "proposed" state for a period of a month or more without being used or specified, then it may be removed from the registry.
If a keyword is added with the "proposed" status and found to be redundant with existing values, it should be removed and listed as a synonym for the existing value. If a keyword is added with the "proposed" status and found to be harmful, then it should be changed to "discontinued" status.
Anyone can change the status at any time, but should only do so in accordance with the definitions above.
Types defined as extensions in the microformats
page for existing rel values with the status "proposed" or "ratified" may be used with the
rel
attribute on link
, a
, and area
elements in accordance to the "Effect on..." field. [MFREL]