4.12 Links — HTML5
HTML5
4.11.5 Commands
Table of contents
5 Loading Web pages
4.12
Links
4.12.1
Introduction
4.12.2
Links created by
and
area
elements
4.12.3
Following hyperlinks
4.12.4
Link types
4.12.4.1
Link type "
alternate
4.12.4.2
Link type "
archives
4.12.4.3
Link type "
author
4.12.4.4
Link type "
4.12.4.5
Link type "
external
4.12.4.6
Link type "
help
4.12.4.7
Link type "
icon
4.12.4.8
Link type "
license
4.12.4.9
Link type "
nofollow
4.12.4.10
Link type "
noreferrer
4.12.4.11
Link type "
pingback
4.12.4.12
Link type "
prefetch
4.12.4.13
Link type "
4.12.4.14
Link type "
stylesheet
4.12.4.15
Link type "
sidebar
4.12.4.16
Link type "
tag
4.12.4.17
Hierarchical link types
4.12.4.17.1
Link type "
index
4.12.4.17.2
Link type "
up
4.12.4.18
Sequential link types
4.12.4.18.1
Link type "
first
4.12.4.18.2
Link type "
last
4.12.4.18.3
Link type "
next
4.12.4.18.4
Link type "
prev
4.12.4.19
Other link types
4.13
Common idioms without dedicated elements
4.13.1
The main part of the content
4.13.2
Tag clouds
4.13.3
Conversations
4.13.4
Footnotes
4.14
Matching HTML elements using selectors
4.14.1
Case-sensitivity
4.14.2
Pseudo-classes
This is a work in
progress!
For the latest updates from the HTML WG, possibly
including important bug fixes, please look at the
editor's draft
instead.
4.12
Links
4.12.1
Introduction
Links are a conceptual construct, created by
area
, 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:
Links to external
resources
These are links to resources that are to be used to augment
the current document, generally automatically processed by the user
agent.
Hyperlinks
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
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,
and
area
element 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 document to the resource given by the
element's
href
attribute.
hyperlink
can have one or more
hyperlink annotations
that modify
the processing semantics of that hyperlink.
4.12.2
Links created by
and
area
elements
The
href
attribute on
and
area
elements must have
a value that is a
valid URL potentially surrounded by
spaces
The
href
attribute on
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.
User agents use
this name when
following hyperlinks
The
rel
attribute on
and
area
elements controls
what kinds of links the elements create. The attribue's value must
be a
set of space-separated tokens
. The
allowed keywords and their meanings
are
defined below.
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
media
attribute describes for which media the target document was
designed. It is purely advisory. The value must be a
valid
media query
. The default, if the
media
attribute is omitted, is
all
".
The
hreflang
attribute on
and
area
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]
User agents must
not consider this attribute authoritative — upon fetching the
resource, user agents must use only language information associated
with the resource to determine its language, not metadata included
in the link to the resource.
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
User agents must
not consider the
type
attribute authoritative — upon fetching the resource, user
agents must not use metadata included in the link to the resource to
determine its type.
4.12.3
Following hyperlinks
When a user
follows a hyperlink
created by an element,
the user agent must
resolve
the
URL
given by the
href
attribute of that element,
relative to that element, and if that is successful, must
navigate
browsing
context
to the resulting
absolute URL
. In the
case of server-side image maps, that
absolute URL
must
have its
hyperlink suffix
appended to it before the
navigation is started.
If
resolving
the
URL
fails, the user agent may report the error to the
user in a user-agent-specific manner, may
navigate
to an error page to
report the error, or may ignore the error and do nothing.
If the user indicated a specific
browsing context
when following the hyperlink, or if the user agent is configured to
follow hyperlinks by navigating a particular browsing context, then
that must be the
browsing context
that is
navigated.
Otherwise, if the element is an
or
area
element that has a
target
attribute, then the
browsing context
that is navigated must be chosen by
applying
the rules for choosing a browsing context given a
browsing context name
, using the value of the
target
attribute as the
browsing context name. If these rules result in the creation of a
new
browsing context
, it must be navigated with
replacement enabled
Otherwise, if the hyperlink is a
sidebar hyperlink
and the user
agent implements a feature that can be considered a secondary
browsing context, such a secondary browsing context may be selected
as the browsing context to be navigated.
Otherwise, if the element is an
or
area
element with no
target
attribute, but the
Document
contains a
base
element with a
target
attribute, then the
browsing context that is navigated must be chosen by applying
the rules for choosing a browsing context given a browsing
context name
, using the value of the
target
attribute of the first such
base
element as the browsing context name. If these
rules result in the creation of a new
browsing context
it must be navigated with
replacement enabled
Otherwise, the browsing context that must be navigated is the
same browsing context as the one which the element itself is in.
The navigation must be done with the
browsing
context
that contains the
Document
object with
which the element in question is associated as the
source
browsing context
4.12.4
Link types
The following table summarizes the link types that are defined by
this specification. 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.
To determine which link types apply to a
link
, or
area
element, the element's
rel
attribute must be
split on spaces
. The resulting tokens are the link
types that apply to that element.
Except where otherwise specified, a keyword must not be specified
more than once per
rel
attribute.
The link types that contain no U+003A COLON characters (:),
including all those defined in this specification, are
ASCII
case-insensitive
values
, and must be
compared as such
Thus,
rel="next"
is the
same as
rel="NEXT"
Link type
Effect on...
Brief description
link
and
area
alternate
Hyperlink
Hyperlink
Gives alternate representations of the current document.
archives
Hyperlink
Hyperlink
Provides a link to a collection of records, documents, or other materials of historical interest.
author
Hyperlink
Hyperlink
Gives a link to the current document's author.
not allowed
Hyperlink
Gives the permalink for the nearest ancestor section.
external
not allowed
Hyperlink
Indicates that the referenced document is not part of the same site as the current document.
first
Hyperlink
Hyperlink
Indicates that the current document is a part of a series, and that the first document in the series is the referenced document.
help
Hyperlink
Hyperlink
Provides a link to context-sensitive help.
icon
External Resource
not allowed
Imports an icon to represent the current document.
index
Hyperlink
Hyperlink
Gives a link to the document that provides a table of contents or index listing the current document.
last
Hyperlink
Hyperlink
Indicates that the current document is a part of a series, and that the last document in the series is the referenced document.
license
Hyperlink
Hyperlink
Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
next
Hyperlink
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.
noreferrer
not allowed
Annotation
Requires that the user agent not send an HTTP
Referer
(sic) header if the user follows the hyperlink.
pingback
External Resource
not allowed
Gives the address of the pingback server that handles pingbacks to the current document.
prefetch
External Resource
External Resource
Specifies that the target resource should be preemptively cached.
prev
Hyperlink
Hyperlink
Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
Hyperlink
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
Imports a stylesheet.
sidebar
Hyperlink
Hyperlink
Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
tag
Hyperlink
Hyperlink
Gives a tag (identified by the given address) that applies to the current document.
up
Hyperlink
Hyperlink
Provides a link to a document giving the context for the current document.
Some of the types described below list synonyms for these
values. These
are to be handled as
specified by user agents, but
must not be used in
documents.
4.12.4.1
Link type "
alternate
The
alternate
keyword may be
used with
link
, and
area
elements.
The meaning of this keyword depends on the values of the other
attributes.
If the element is a
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.
The
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 first
link
, or
area
element in the document (in tree order) with the
alternate
keyword used with the
type
attribute set to the value
application/rss+xml
or the value
application/atom+xml
must be treated as the default
syndication feed for the purposes of feed autodiscovery.
The following
link
element gives the syndication
feed for the current page:
The following extract offers various different syndication
feeds:
You can access the planets database using Atom feeds:
Otherwise
The keyword creates a
hyperlink
referencing an
alternate representation of the current document.
The nature of the referenced document is given by the
media
hreflang
, and
type
attributes.
If the
alternate
keyword is
used with the
media
attribute, it indicates that the referenced document is intended for
use with the media specified.
If the
alternate
keyword is
used with the
hreflang
attribute, and that attribute's value differs from the
root
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
media
hreflang
, and
type
attributes can be combined
when specified with the
alternate
keyword.
For example, the following link is a French translation that
uses the PDF format:
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.
4.12.4.2
Link type "
archives
The
archives
keyword may be
used with
link
, and
area
elements. This keyword creates a
hyperlink
The
archives
keyword indicates
that the referenced document describes a collection of records,
documents, or other materials of historical interest.
A blog's index page could link to an index of the
blog's past posts with
rel="archives"
Synonyms
: For historical reasons, user agents
must also treat the keyword "
archive
" like the
archives
keyword.
4.12.4.3
Link type "
author
The
author
keyword may be
used with
link
, and
area
elements. This keyword creates a
hyperlink
For
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 e-mail address of the
author.
[MAILTO]
Synonyms
: For historical reasons, user agents
must also treat
link
, and
area
elements that have a
rev
attribute with the value "
made
" as having the
author
keyword specified as a link
relationship.
4.12.4.4
Link type "
The
keyword may be
used with
and
area
elements. This
keyword creates a
hyperlink
The
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.
...
Example of permalinks
First example
This permalink applies to
only the content from the first H2 to the second H2. The DIV isn't
exactly that section, but it roughly corresponds to it.
Second example
This permalink applies to
the outer ARTICLE element (which could be, e.g., a blog post).
This permalink applies to
the inner ARTICLE element (which could be, e.g., a blog comment).
...
4.12.4.5
Link type "
external
The
external
keyword may be
used with
and
area
elements. This
keyword creates a
hyperlink
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.
4.12.4.6
Link type "
help
The
help
keyword may be used with
link
, and
area
elements. This keyword creates a
hyperlink
For
and
area
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.
For
link
elements, the
help
keyword indicates that the referenced
document provides help for the page as a whole.
4.12.4.7
Link type "
icon
The
icon
keyword may be used with
link
elements. This keyword creates an
external resource link
The specified resource is an icon representing the page or site,
and should be used by the user agent when representing the page in
the user interface.
Icons could be auditory icons, visual icons, or other kinds of
icons.
If multiple icons are provided, the user
agent must select the most appropriate icon according to the
type
media
, and
sizes
attributes. If there are
multiple equally appropriate icons, user agents must use the last
one declared in
tree order
. If the user agent tries to
use an icon but that icon is determined, upon closer examination, to
in fact be inappropriate (e.g. because it uses an unsupported
format), then the user agent must try the next-most-appropriate icon
as determined by the attributes.
There is no default type for resources given by the
icon
keyword. However, for the purposes of
determining the type of the
resource
, user agents must expect the resource to be an image.
The
sizes
attribute gives the sizes of icons for visual media.
If specified, the attribute must have a value that is an
unordered set of unique space-separated tokens
, which
are
ASCII case-insensitive
. The values must all be
either an
ASCII case-insensitive
match for the string
any
", or a value that
consists of two
valid
non-negative integers
that do not have a leading U+0030 DIGIT
ZERO (0) character and that are separated by a single U+0078 LATIN
SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character.
The keywords represent icon sizes.
To parse and process the attribute's value, the user agent must
first
split the attribute's
value on spaces
, and must then parse each resulting keyword
to determine what it represents.
The
any
keyword
represents that the resource contains a scalable icon, e.g. as
provided by an SVG image.
Other keywords must be further parsed as follows to determine
what they represent:
If the keyword doesn't contain exactly one U+0078 LATIN
SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character, then
this keyword doesn't represent anything. Abort these steps for that
keyword.
Let
width string
be the string before
the "
" or "
".
Let
height string
be the string after
the "
" or "
".
If either
width string
or
height string
start with a U+0030 DIGIT ZERO (0)
character or contain any characters other than characters in the
range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then this
keyword doesn't represent anything. Abort these steps for that
keyword.
Apply the
rules for parsing non-negative
integers
to
width string
to obtain
width
Apply the
rules for parsing non-negative
integers
to
height string
to obtain
height
The keyword represents that the resource contains a bitmap
icon with a width of
width
device pixels and a
height of
height
device pixels.
The keywords specified on the
sizes
attribute must not represent
icon sizes that are not actually available in the linked
resource.
If the attribute is not specified, then the user agent must
assume that the given icon is appropriate, but less appropriate than
an icon of a known and appropriate size.
The following snippet shows the top part of an application with
several icons.
...
4.12.4.8
Link type "
license
The
license
keyword may be used
with
link
, and
area
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:
Kissat
One of them has six toes!
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.
Synonyms
: For historical reasons, user agents
must also treat the keyword "
" like
the
license
keyword.
4.12.4.9
Link type "
nofollow
ISSUE-124
(rel-limits) blocks progress to Last Call
The
nofollow
keyword may be
used with
and
area
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.
4.12.4.10
Link type "
noreferrer
ISSUE-124
(rel-limits) blocks progress to Last Call
The
noreferrer
keyword may be
used with
and
area
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.
If a user agent follows a link defined by an
or
area
element that has the
noreferrer
keyword, the user agent
must not include a
Referer
(sic)
HTTP header (
or
equivalent
for other protocols) in the request.
This keyword also
causes the
opener
attribute to remain null
if the
hyperlink creates a new
browsing context
4.12.4.11
Link type "
pingback
The
pingback
keyword may be
used with
link
elements. This keyword creates an
external resource link
For the semantics of the
pingback
keyword, see the Pingback 1.0
specification.
[PINGBACK]
4.12.4.12
Link type "
prefetch
The
prefetch
keyword may be
used with
link
, and
area
elements. This keyword creates an
external resource link
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.
There is no default type for resources given by the
prefetch
keyword.
4.12.4.13
Link type "
The
keyword may be used
with
link
, and
area
elements. This keyword creates a
hyperlink
The
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
link type to enable user agents to
autodiscover search interfaces.
[OPENSEARCH]
4.12.4.14
Link type "
stylesheet
The
stylesheet
keyword may be
used with
link
elements. This keyword creates an
external resource link
that
contributes to the
styling processing model
The specified resource is a resource that describes how to
present the document. Exactly how the resource is to be processed
depends on the actual type of the resource.
If the
alternate
keyword is
also specified on the
link
element, then
the link
is an alternative stylesheet
; 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
The appropriate time to
obtain
the resource is when the
external resource link
is created or when its element is
inserted into a document
, whichever happens
last. If the resource is
an alternative stylesheet
then the user agent may
defer obtaining the resource until it is part of the
preferred
style sheet set
[CSSOM]
Quirk
: If the document has been set to
quirks mode
, has the
same origin
as the
URL
of the external resource
, and
the
Content-Type metadata
of the
external resource is not a supported style sheet type, the user
agent must instead assume it to be
text/css
4.12.4.15
Link type "
sidebar
The
sidebar
keyword may be used
with
link
, and
area
elements. This keyword creates a
hyperlink
The
sidebar
keyword indicates
that the referenced document, if retrieved, is intended to be shown
in a
secondary browsing context
(if possible), instead
of in the current
browsing context
hyperlink
with the
sidebar
keyword specified is a
sidebar hyperlink
4.12.4.16
Link type "
tag
The
tag
keyword may be used
with
link
, 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 tag across a set of pages.
4.12.4.17
Hierarchical link types
Some documents form part of a hierarchical structure of
documents.
A hierarchical structure of documents is one where each document
can have various subdocuments. The document of which a document is a
subdocument is said to be the document's
parent
. A document
with no parent forms the top of the hierarchy.
A document may be part of multiple hierarchies.
4.12.4.17.1
Link type "
index
ISSUE-118
(broken-link-types) blocks progress to Last Call
The
index
keyword may be used with
link
, and
area
elements. This keyword creates a
hyperlink
The
index
keyword indicates that
the document is part of a hierarchical structure, and that the link
is leading to the document that is the top of the hierarchy. It
conveys more information when used with the
up
keyword (q.v.).
Synonyms
: For historical reasons, user agents
must also treat the keywords "
top
", "
contents
", and "
toc
" like the
index
keyword.
4.12.4.17.2
Link type "
up
ISSUE-119
(rel-repetition) blocks progress to Last Call
The
up
keyword may be used with
link
, and
area
elements. This keyword creates a
hyperlink
The
up
keyword indicates that the
document is part of a hierarchical structure, and that the link is
leading to a document that is an ancestor of the current
document.
The
up
keyword may be repeated within
rel
attribute to indicate
the hierarchical distance from the current document to the
referenced document. If it occurs only once, then the link is
leading to the current document's parent; each additional occurrence
of the keyword represents one further level. If the
index
keyword is also present, then the
number of
up
keywords is the depth of
the current page relative to the top of the hierarchy. Only one link
is created for the set of one or more
up
keywords and, if present, the
index
keyword.
If the page is part of multiple hierarchies, then they should be
described in different
paragraphs
User agents
must scope any interpretation of the
up
and
index
keywords together
indicating the depth of the hierarchy to the
paragraph
in which the link finds itself, if any, or to the document
otherwise.
When two links have both the
up
and
index
keywords specified together in
the same scope and contradict each other by having a different
number of
up
keywords, the link with the
greater number of
up
keywords must be
taken as giving the depth of the document.
This can be used to mark up a navigation style sometimes known
as bread crumbs. In the following example, the current page can be
reached via two paths.
The
relList
IDL
attribute (e.g. on the
element) does not currently
represent multiple
up
keywords (the
interface hides duplicates).
4.12.4.18
Sequential link types
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.
4.12.4.18.1
Link type "
first
ISSUE-118
(broken-link-types) blocks progress to Last Call
The
first
keyword may be used with
link
, and
area
elements. This keyword creates a
hyperlink
The
first
keyword indicates that
the document is part of a sequence, and that the link is leading to
the document that is the first logical document in the sequence.
Synonyms
: For historical reasons, user agents
must also treat the keywords "
begin
" and
start
" like the
first
keyword.
4.12.4.18.2
Link type "
last
The
last
keyword may be used with
link
, and
area
elements. This keyword creates a
hyperlink
The
last
keyword indicates that the
document is part of a sequence, and that the link is leading to the
document that is the last logical document in the sequence.
Synonyms
: For historical reasons, user agents
must also treat the keyword "
end
" like the
last
keyword.
4.12.4.18.3
Link type "
next
The
next
keyword may be used with
link
, and
area
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.
4.12.4.18.4
Link type "
prev
The
prev
keyword may be used with
link
, and
area
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.
Synonyms
: For historical reasons, user agents
must also treat the keyword "
previous
" like
the
prev
keyword.
4.12.4.19
Other link types
ISSUE-127
(link-type-flags) blocks progress to Last Call
Extensions to the predefined
set of link types
may be registered in the
WHATWG Wiki
RelExtensions page
[WHATWGWIKI]
Anyone is free to edit the WHATWG Wiki RelExtensions page at any
time to add a type. Extension types must be specified with the
following information:
Keyword
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
Effect on...
link
One of the following:
Not allowed
The keyword must not be specified on
link
elements.
Hyperlink
The keyword may be specified on a
link
element;
it creates a
hyperlink
External Resource
The keyword may be specified on a
link
element;
it creates an
external resource link
Effect on...
and
area
One of the following:
Not allowed
The keyword must not be specified on
and
area
elements.
Hyperlink
The keyword may be specified on
and
area
elements; it creates a
hyperlink
External Resource
The keyword may be specified on a
and
area
elements; it creates an
external resource
link
Hyperlink Annotation
The keyword may be specified on a
and
area
elements; it
annotates
other
hyperlinks
created by the element.
Brief description
A short non-normative description of what the keyword's
meaning is.
Specification
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.
Synonyms
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.
Status
One of the following:
Proposed
The keyword has not received wide peer review and
approval. Someone has proposed it and is, or soon will be, using
it.
Ratified
The keyword has received wide peer review and approval. It
has a specification that unambiguously defines how to handle
pages that use the keyword, including when they use it in
incorrect ways.
Discontinued
The keyword has received wide peer review and it has been
found wanting. Existing pages are using this keyword, but new
pages should avoid it. The "brief description" and
"specification" entries will give details of what authors should
use instead, if anything.
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.
Conformance checkers must use the information given on the WHATWG
Wiki RelExtensions page to establish if a value is allowed or not:
values defined in this specification or marked as "proposed" or
"ratified" must be accepted when used on the elements for which they
apply as described in the "Effect on..." field, whereas values
marked as "discontinued" or not listed in either this specification
or on the aforementioned page must be rejected as invalid.
Conformance checkers may cache this information (e.g. for
performance reasons or to avoid the use of unreliable network
connectivity).
When an author uses a new type not defined by either this
specification or the Wiki page, conformance checkers should offer to
add the value to the Wiki, with the details described above, with
the "proposed" status.
Types defined as extensions in the
WHATWG Wiki
RelExtensions page
with the status "proposed" or "ratified" may
be used with the
rel
attribute on
link
, and
area
elements in
accordance to the "Effect on..." field.
[WHATWGWIKI]
4.13
Common idioms without dedicated elements
ISSUE-89
(idioms) blocks progress to Last Call
4.13.1
The main part of the content
The main content of a page — not including headers and
footers, navigation links, sidebars, advertisements, and so forth
— can be marked up in a variety of ways, depending on the
needs of the author.
The simplest solution is to not mark up the main content at all,
and just leave it as implicit. Another way to think of this is that
the
body
elements marks up the main content of the
page, and the bits that aren't main content are excluded through the
use of more appropriate elements like
aside
and
nav
Here is a short Web page marked up along this minimalistic
school of thought. The main content is highlighted. Notice how all
the
other
content in the
body
is marked up
with elements to indicate that it's not part of the main content,
in this case
header
nav
, and
footer
My toys
I really like my chained book and my telephone. I'm not such a
fan of my big ball.
Another toy I like is my mirror.
If the main content is an independent unit of content that one
could imagine syndicating independently, then the
article
element would be appropriate to mark up the
main content of the document.
The document in the previous example is here recast as a blog
post:
The Boy Blog
My toys
Published
I really like my chained book and my telephone. I'm not such a
fan of my big ball.
Another toy I like is my mirror.
If the main content is not an independent unit of content so much
as a section of a larger work, for instance a chapter, then the
section
element would be appropriate to mark up the
main content of the document.
Here is the same document, case as a chapter in an online
book:
Chapter 2: My Toys
I really like my chained book and my telephone. I'm not such a
fan of my big ball.
Another toy I like is my mirror.
If neither
article
nor
section
would be
appropriate, but the main content still needs an explicit element,
for example for styling purposes, then the
div
element
can be used.
This is the same as the original example, but using
div
for the main content instead of leaving it
implied:
My toys
I really like my chained book and my telephone. I'm not such a
fan of my big ball.
Another toy I like is my mirror.
4.13.2
Tag clouds
This specification does not define any markup
specifically for marking up lists of keywords that apply to a group
of pages (also known as
tag clouds
). In general, authors are
encouraged to either mark up such lists using
ul
elements with explicit inline counts that are then hidden and turned
into a presentational effect using a style sheet, or to use SVG.
Here, three tags are included in a short tag cloud:
...
The actual frequency of each tag is given using the
title
attribute. A CSS style sheet is
provided to convert the markup into a cloud of differently-sized
words, but for user agents that do not support CSS or are not
visual, the markup contains annotations like "(popular)" or
"(rare)" to categorize the various tags by frequency, thus enabling
all users to benefit from the information.
The
ul
element is used (rather than
ol
) because the order is not particularly important:
while the list is in fact ordered alphabetically, it would convey
the same information if ordered by, say, the length of the tag.
The
tag
rel
-keyword is
not
used
on these
elements because they do not represent tags
that apply to the page itself; they are just part of an index
listing the tags themselves.
4.13.3
Conversations
This specification does not define a specific element for marking
up conversations, meeting minutes, chat transcripts, dialogues in
screenplays, instant message logs, and other situations where
different players take turns in discourse.
Instead, authors are encouraged to mark up conversations using
elements and punctuation. Authors who need to mark
the speaker for styling purposes are encouraged to use
span
or
. Paragraphs with their text
wrapped in the
element can be used for marking up
stage directions.
This example demonstrates this using an extract from Abbot and
Costello's famous sketch,
Who's on first
Costello: Look, you gotta first baseman?
Abbott: Certainly.
Costello: Who's playing first?
Abbott: That's right.
Costello becomes exasperated.
Costello: When you pay off the first baseman every month, who gets the money?
Abbott: Every dollar of it.
The following extract shows how an IM conversation log could be
marked up.
egof I'm not that nerdy, I've only seen 30% of the star trek episodes
kaj if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
egof it's unarguably
* kaj blinks
kaj you are not helping your case
4.13.4
Footnotes
HTML does not have a dedicated mechanism for marking up
footnotes. Here are the recommended alternatives.
For short inline annotations, the
title
attribute should be used.
In this example, two parts of a dialogue are annotated with
footnote-like content using the
title
attribute.
Customer: Hello! I wish to register a complaint. Hello. Miss?
Shopkeeper:
>Watcha mean, miss?
Customer: Uh, I'm sorry, I have a cold. I wish to make a complaint.
Shopkeeper: Sorry, Announcer: Number 16: The hand. Interviewer: Good evening. I have with me in the studio tonight Norman: I don't. [1] Interviewer: You told me you did! [1] This is, naturally, a lie, Customer: I will not buy this record, it is scratched. Shopkeeper: I'm sorry? Customer: I will not buy this record, it is scratched. Shopkeeper: No no no, this's'a tobacconist's. 1. Assumed. 2. Footwork impeccable. 3. Quality described as "well". 4. A lot.
>we're
closing for lunch.
For longer annotations, the
element should be
used, pointing to an element later in the document. The convention
is that the contents of the link be a number in square brackets.
In this example, a footnote in the dialogue links to a paragraph
below the dialogue. The paragraph then reciprocally links back to the
dialogue, allowing the user to return to the location of the
footnote.
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why do you
contradict people?
...
but paradoxically if it were true he could not say so without
contradicting the interviewer and thus making it false.
For side notes, longer annotations that apply to entire sections
of the text rather than just specific words or sentences, the
aside
element should be used.
In this example, a sidebar is given after a dialogue, giving it
some context.
For figures or tables, footnotes can be included in the relevant
figcaption
or
caption
element, or in
surrounding prose.
In this example, a
table has cells with footnotes
that are given in prose. A
figure
element is used to
give a single legend to the combination of the table and its
footnotes. Activity Location Cost Dance Wherever possible £01 Routines, chorus scenes2 Undisclosed Undisclosed Dining3 Camelot Cost of ham, jam, and spam4
4.14
Matching HTML elements using selectors
4.14.1
Case-sensitivity
Attribute and element
names
of
HTML
elements
in
HTML documents
must be treated as
ASCII case-insensitive
Classes from the
class
attribute
of
HTML elements
in documents that are in
quirks
mode
must be treated as
ASCII
case-insensitive
Attribute selectors on an
HTML
element
in an
HTML
document
must treat the
values
of attributes with
the following names as
ASCII case-insensitive
, with one
exception as noted below:
accept
accept-charset
align
alink
axis
bgcolor
charset
checked
clear
codetype
color
compact
declare
defer
dir
direction
disabled
enctype
face
frame
hreflang
http-equiv
lang
language
link
media
method
multiple
nohref
noresize
noshade
nowrap
readonly
rel
rev
rules
scope
scrolling
selected
shape
target
text
type
(except as specified below)
valign
valuetype
vlink
All other attribute values on
HTML elements
must be
treated as
case-sensitive
The exception to the list above is the
type
attribute on
ol
elements, which must be treated as
case-sensitive
4.14.2
Pseudo-classes
There are a number of dynamic selectors that can be used with
HTML. This section defines when these selectors match HTML
elements.
:link
:visited
All
elements that have an
href
attribute, all
area
elements that have an
href
attribute, and all
link
elements that have an
href
attribute, must match one of
:link
and
:visited
Other specification might apply more specific rules regarding
how these elements are to match these pseudo-elements, to mitigate
some privacy concerns that apply with straightforward
implementations of this requirement.
:active
The
:active
pseudo-class
must match the following elements between the time the user begins
to activate the element and the time the user stops activating
the element:
elements that have an
href
attribute
area
elements that have an
href
attribute
link
elements that have an
href
attribute
button
elements that are not
disabled
input
elements whose
type
attribute is in the
Submit Button
Image Button
Reset Button
, or
Button
state
command
elements that do not have a
disabled
attribute
any other element, if it is
specially
focusable
For example, if the user is using a keyboard to
push a
button
element by pressing the space bar, the
element would match this pseudo-class in between the time that the
element received the
keydown
event and the time the element received the
keyup
event.
:enabled
The
:enabled
pseudo-class
must match the following elements:
elements that have an
href
attribute
area
elements that have an
href
attribute
link
elements that have an
href
attribute
button
elements that are not
disabled
input
elements whose
type
attribute are not in the
Hidden
state and that
are not
disabled
select
elements that are not
disabled
textarea
elements that are not
disabled
option
elements that are not
disabled
command
elements that do not have a
disabled
attribute
li
elements that are children of
elements, and that have a child element that
defines a
command
, if the
first such element's
Disabled State
facet
is false (not disabled)
:disabled
The
:disabled
pseudo-class must match the following elements:
button
elements that are
disabled
input
elements whose
type
attribute are not in the
Hidden
state and that
are
disabled
select
elements that are
disabled
textarea
elements that are
disabled
option
elements that are
disabled
command
elements that have a
disabled
attribute
li
elements that are children of
elements, and that have a child element that
defines a
command
, if the
first such element's
Disabled State
facet
is true (disabled)
:checked
The
:checked
pseudo-class
must match the following elements:
input
elements whose
type
attribute is in the
Checkbox
state and whose
checkedness
state is
true
input
elements whose
type
attribute is in the
Radio Button
state and whose
checkedness
state is
true
option
elements whose
selectedness
is
true
command
elements whose
type
attribute is in the
Checkbox
state
and that have a
checked
attribute
command
elements whose
type
attribute is in the
Radio
state and that
have a
checked
attribute
:indeterminate
The
:indeterminate
pseudo-class must match
input
elements whose
type
attribute is in the
Checkbox
state and whose
indeterminate
IDL
attribute is set to true.
:default
The
:default
pseudo-class
must match the following elements:
button
elements that are their form's
default button
input
elements whose
type
attribute is in the
Submit Button
or
Image Button
state, and that
are their form's
default button
input
elements to which the
checked
attribute applies and
that have a
checked
attribute
option
elements that have a
selected
attribute
:valid
The
:valid
pseudo-class
must match all elements that are
candidates for constraint validation
and that
satisfy their
constraints
:invalid
The
:invalid
pseudo-class
must match all elements that are
candidates for constraint validation
but that do not
satisfy their
constraints
:in-range
The
:in-range
pseudo-class must match all elements that are
candidates for
constraint validation
and that are neither
suffering
from an underflow
nor
suffering from an
overflow
:out-of-range
The
:out-of-range
pseudo-class must match all elements that are
candidates for
constraint validation
and that are
suffering from an
underflow
or
suffering from an overflow
:required
The
:required
pseudo-class must match the following elements:
input
elements that are
required
select
elements that have a
required
attribute
textarea
elements that have a
required
attribute
:optional
The
:optional
pseudo-class must match the following elements:
input
elements to which the
required
attribute applies
that are not
required
select
elements that do not have a
required
attribute
textarea
elements that do not have a
required
attribute
:read-only
:read-write
The
:read-write
pseudo-class must match the following elements:
input
elements to which the
readonly
attribute applies,
but that are not
immutable
(i.e. that do not have the
readonly
attribute specified
and that are not
disabled
textarea
elements that do not have a
readonly
attribute, and
that are not
disabled
any element that is
editable
The
:read-only
pseudo-class must match all other
HTML elements
:ltr
The
:ltr
pseudo-class must
match all elements whose
directionality
is '
ltr
'.
:rtl
The
:rtl
pseudo-class must
match all elements whose
directionality
is '
rtl
'.
Another section of this specification defines the
target element
used with the
:target
pseudo-class.
This specification does not define when an element
matches the
:hover
:focus
, or
:lang()
dynamic pseudo-classes, as
those are all defined in sufficient detail in a language-agnostic
fashion in the Selectors specification.
[SELECTORS]