a
and area
elementsalternate
"author
"bookmark
"external
"help
"icon
"license
"nofollow
"noreferrer
"pingback
"prefetch
"search
"sidebar
"stylesheet
"tag
"Links are a conceptual construct, created by a
,
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:
These are links to resources that are to be used to augment the current document, generally automatically processed by the user agent.
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
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.
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. User agents use
this name when following hyperlinks.
The rel
attribute on a
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 a
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.
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 a 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 a
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 a
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.
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
,
a
, 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 |
a and area |
||
alternate |
Hyperlink | Hyperlink | Gives alternate representations of the current document. |
author |
Hyperlink | Hyperlink | Gives a link to the current document's author. |
bookmark |
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. |
help |
Hyperlink | Hyperlink | Provides a link to context-sensitive help. |
icon |
External Resource | not allowed | Imports an icon to represent the current 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. |
search |
Hyperlink | Hyperlink | Gives a link to a resource that can be used to search through the current document and its related pages. |
sidebar |
Hyperlink | Hyperlink | Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one). |
stylesheet |
External Resource | not allowed | Imports a stylesheet. |
tag |
Hyperlink | Hyperlink | Gives a tag (identified by the given address) that applies to 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.
alternate
"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.
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
, a
, 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:
<link rel="alternate" type="application/atom+xml" href="data.xml">
The following extract offers various different syndication feeds:
<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>
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:
<link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
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 e-mail address of the
author. [MAILTO]
Synonyms: For historical reasons, user agents
must also treat link
, a
, and
area
elements that have a rev
attribute with the value "made
" as having the author
keyword specified as a link
relationship.
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</a> 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.</p> </div> <h2>Second example</h2> <article id="b"> <p><a href="b.html" rel="bookmark">This</a> permalink applies to the outer ARTICLE element (which could be, e.g., a blog post).</p> <article id="c"> <p><a href="c.html" rel="bookmark">This</a> permalink applies to the inner ARTICLE element (which could be, e.g., a blog comment).</p> </article> </article> </body> ...
external
"The external
keyword may be
used with a
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.
help
"The help
keyword may be used with
link
, a
, and area
elements. This keyword creates a hyperlink.
For a
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.
<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.
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 "x
" or "X
".
Let height string be the string after
the "x
" or "X
".
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.
In the absence of a link
with the icon
keyword, for Document
s
obtained over HTTP or HTTPS, user agents may instead attempt to
fetch and use an icon with the absolute
URL obtained by resolving the URL "/favicon.ico
" against the document's
address, as if the page had declared that icon using the
icon
keyword.
The following snippet shows the top part of an application with several icons.
<!DOCTYPE HTML> <html> <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> ...
license
"The license
keyword may be used
with link
, a
, 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:
<!DOCTYPE HTML> <html> <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.
Synonyms: For historical reasons, user agents
must also treat the keyword "copyright
" like
the license
keyword.
nofollow
"The nofollow
keyword may be
used with a
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.
noreferrer
"The noreferrer
keyword may be
used with a
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 a
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.
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]
prefetch
"The prefetch
keyword may be
used with link
, a
, 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.
search
"The search
keyword may be used
with link
, a
, and area
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]
sidebar
"The sidebar
keyword may be used
with link
, a
, 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.
A hyperlink with the sidebar
keyword specified is a sidebar hyperlink.
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
.
tag
"The tag
keyword may be used
with link
, 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 tag across a set of pages.
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
, 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.
prev
"The prev
keyword may be used with
link
, a
, 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.
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:
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.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.
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
, a
, and area
elements in
accordance to the "Effect on..." field. [WHATWGWIKI]
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
.
<!DOCTYPE HTML> <html> <head> <title> My Toys </title> </head> <body> <header> <h1>My toys</h1> </header> <nav> <p><a href="/">Home</a></p> <p><a href="/contact">Contact</a></p> </nav> <p>I really like my chained book and my telephone. I'm not such a fan of my big ball.</p> <p>Another toy I like is my mirror.</p> <footer> <p>© copyright 2010 by the boy</p> </footer> </body> </html>
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:
<!DOCTYPE HTML> <html> <head> <title> The Boy Blog: My Toys </title> </head> <body> <header> <h1>The Boy Blog</h1> </header> <nav> <p><a href="/">Home</a></p> <p><a href="/contact">Contact</a></p> </nav> <article> <header> <h1>My toys</h1> <p>Published <time pubdate datetime="2010-08-04">August 4th</time></p> </header> <p>I really like my chained book and my telephone. I'm not such a fan of my big ball.</p> <p>Another toy I like is my mirror.</p> </article> <footer> <p>© copyright 2010 by the boy</p> </footer> </body> </html>
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:
<!DOCTYPE HTML> <html> <head> <title> Chapter 2: My Toys — The Book of the Boy </title> </head> <body> <header> <h1>Chapter 2: My Toys</h1> </header> <nav> <p><a href="/">Front Page</a></p> <p><a href="/toc">Table of Contents</a></p> <p><a href="/c1">Chapter 1</a> — <a href="/c3">Chapter 3</a></p> </nav> <section> <p>I really like my chained book and my telephone. I'm not such a fan of my big ball.</p> <p>Another toy I like is my mirror.</p> </section> <footer> <p>© copyright 2010 by the boy</p> </footer> </body> </html>
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:
<!DOCTYPE HTML> <html> <head> <title> My Toys </title> <style> body > div { background: navy; color: yellow; } </style> </head> <body> <header> <h1>My toys</h1> </header> <nav> <p><a href="/">Home</a></p> <p><a href="/contact">Contact</a></p> </nav> <div> <p>I really like my chained book and my telephone. I'm not such a fan of my big ball.</p> <p>Another toy I like is my mirror.</p> </div> <footer> <p>© copyright 2010 by the boy</p> </footer> </body> </html>
This specification does not provide a machine-readable way of
describing bread-crumb navigation menus. Authors are encouraged to
just use a series of links in a paragraph. The nav
element can be used to mark the section containing these
paragraphs as being navigation blocks.
In the following example, the current page can be reached via two paths.
<nav> <p> <a href="/">Main</a> > <a href="/products/">Products</a> > <a href="/products/dishwashers/">Dishwashers</a> > <a>Second hand</a> </p> <p> <a href="/">Main</a> > <a href="/second-hand/">Second hand</a> > <a>Dishwashers</a> </p> </nav>
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:
<style> @media screen, print, handheld, tv { /* should be ignored by non-visual browsers */ .tag-cloud > li > span { display: none; } .tag-cloud > li { display: inline; } .tag-cloud-1 { font-size: 0.7em; } .tag-cloud-2 { font-size: 0.9em; } .tag-cloud-3 { font-size: 1.1em; } .tag-cloud-4 { font-size: 1.3em; } .tag-cloud-5 { font-size: 1.5em; } } </style> ... <ul class="tag-cloud"> <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span> <li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span> <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span> </ul>
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 a
elements because they do not represent tags
that apply to the page itself; they are just part of an index
listing the tags themselves.
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
p
elements and punctuation. Authors who need to mark
the speaker for styling purposes are encouraged to use
span
or b
. Paragraphs with their text
wrapped in the i
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:
<p> Costello: Look, you gotta first baseman? <p> Abbott: Certainly. <p> Costello: Who's playing first? <p> Abbott: That's right. <p> Costello becomes exasperated. <p> Costello: When you pay off the first baseman every month, who gets the money? <p> Abbott: Every dollar of it.
The following extract shows how an IM conversation log could be marked up.
<p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes <p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy <p> <time>14:23</time> <b>egof</b> it's unarguably <p> <time>14:23</time> <i>* kaj blinks</i> <p> <time>14:24</time> <b>kaj</b> you are not helping your case
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.
<p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss? <p> <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'" >Watcha</span> mean, miss? <p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint. <p> <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're closing for lunch</span>.
For longer annotations, the a
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.
<p> Announcer: Number 16: The <i>hand</i>. <p> Interviewer: Good evening. I have with me in the studio tonight Mr Norman St John Polevaulter, who for the past few years has been contradicting people. Mr Polevaulter, why <em>do</em> you contradict people? <p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup> <p> Interviewer: You told me you did! ... <section> <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie, but paradoxically if it were true he could not say so without contradicting the interviewer and thus making it false.</p> </section>
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.
<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched. <p> <span class="speaker">Shopkeeper</span>: I'm sorry? <p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched. <p> <span class="speaker">Shopkeeper</span>: No no no, this's'a tobacconist's. <aside> <p>In 1970, the British Empire lay in ruins, and foreign nationalists frequented the streets — many of them Hungarians (not the streets — the foreign nationals). Sadly, Alexander Yalt has been publishing incompetently-written phrase books. </aside>
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.
<figure> <figcaption>Table 1. Alternative activities for knights.</figcaption> <table> <tr> <th> Activity <th> Location <th> Cost <tr> <td> Dance <td> Wherever possible <td> £0<sup><a href="#fn1">1</a></sup> <tr> <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup> <td> Undisclosed <td> Undisclosed <tr> <td> Dining<sup><a href="#fn3">3</a></sup> <td> Camelot <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup> </table> <p id="fn1">1. Assumed.</p> <p id="fn2">2. Footwork impeccable.</p> <p id="fn3">3. Quality described as "well".</p> <p id="fn4">4. A lot.</p> </figure>
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.
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 a
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
is defined to match an element while
an element is being activated by the user
. For the
purposes of defining the :active
pseudo-class only, an HTML
user agent must consider an element as being activated if
it is:
An element falling into one of the following categories between the time the user begins to indicate an intent to trigger the element's activation behavior and either the time the user stops indicating an intent to trigger the element's activation behavior, or the time the element's activation behavior has finished running, which ever comes first:
a
elements that have an href
attributearea
elements that have an href
attributelink
elements that have an href
attributebutton
elements that are not disabledinput
elements whose type
attribute is in the Submit Button, Image Button, Reset Button, or Button statecommand
elements that do not have a disabled
attributeFor 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.
An element that the user indicates using a pointing device while that pointing device is in the "down" state (e.g. for a mouse, between the time the mouse button is pressed and the time it is depressed).
An element that has a descendant that is currently matching
the :active
pseudo-class.
:enabled
The :enabled
pseudo-class
must match any element falling into one of the following
categories:
a
elements that have an href
attributearea
elements that have an href
attributelink
elements that have an href
attributebutton
elements that are not disabledinput
elements whose type
attribute are not in the
Hidden state and that
are not disabledselect
elements that are not disabledtextarea
elements that are not disabledoption
elements that are not disabledcommand
elements that do not have a disabled
attributeli
elements that are children of
menu
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 any element falling into one of the
following categories:
button
elements that are disabledinput
elements whose type
attribute are not in the
Hidden state and that
are disabledselect
elements that are disabledtextarea
elements that are disabledoption
elements that are disabledcommand
elements that have a disabled
attributeli
elements that are children of
menu
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 any element falling into one of the following
categories:
input
elements whose type
attribute is in the Checkbox state and whose
checkedness state is
trueinput
elements whose type
attribute is in the Radio Button state and whose
checkedness state is
trueoption
elements whose selectedness is
truecommand
elements whose type
attribute is in the Checkbox state
and that have a checked
attributecommand
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 any element falling into one of the following
categories:
button
elements that are their form's
default buttoninput
elements whose type
attribute is in the Submit Button or Image Button state, and that
are their form's default buttoninput
elements to which the checked
attribute applies and
that have a checked
attributeoption
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 any element falling into one of the
following categories:
:optional
The :optional
pseudo-class must match any element falling into one of the
following categories:
:read-only
:read-write
The :read-write
pseudo-class must match any element falling into one of the
following categories:
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 disabledinput
elemenst nor textarea
elementsThe :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]