jump
a and
area elementsalternate"author"bookmark"help"icon"license"nofollow"noreferrer"prefetch"search"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.
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]
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.
In some cases, resources are intended for later use rather than
immediate viewing. To indicate that a resource is intended to be
downloaded for use later, rather than immediately used, the
download attribute can
be specified on the a or area element that creates the hyperlink to that resource.
The attribute can furthermore be given a value, to specify the
filename that user agents are to use when storing the resource in a
file system. This value can be overridden by the Content-Disposition HTTP header's
filename parameters. [RFC6266]
In cross-origin situations, the download attribute has to be
combined with the Content-Disposition HTTP header,
specifically with the attachment disposition
type, to avoid the user being warned of possibly nefarious
activity. (This is to protect users from being made to download
sensitive personal or confidential information without their full
understanding.)
The ping attribute is
redundant with pre-existing technologies like HTTP redirects and
JavaScript in allowing Web pages to track which off-site links are
most popular or allowing advertisers to track click-through
rates.
However, the ping
attribute provides these advantages to the user over those
alternatives:
Thus, while it is possible to track users without this feature,
authors are encouraged to use the ping attribute so that the user agent
can make the user experience more transparent.
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.
Except where otherwise specified, a keyword must not be
specified more than once per rel attribute.
Link types are always ASCII case-insensitive.
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 author of the current document or article. |
bookmark |
not allowed | Hyperlink | Gives the permalink for the nearest ancestor section. |
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. |
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. |
stylesheet |
External Resource | not allowed | Imports a stylesheet. |
tag |
not allowed | Hyperlink | Gives a tag (identified by the given address) that applies to the current document. |
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
stylesheetThe 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+xmlThe keyword creates a hyperlink referencing a syndication feed (though not necessarily syndicating exactly the same content as the current page).
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]
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>
...
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.
For a and area elements, on some browsers, the
help keyword causes the link to use a different
cursor.
icon"The icon keyword may be used with link elements. This keyword creates an
external resource link.
Icons could be auditory icons, visual icons, or other kinds of icons.
The sizes attribute gives the
sizes of icons for visual media. Its value, if present, is merely
advisory. User agents may use the value to decide which icon(s) to
use if multiple icons are available.
If specified, the attribute must have a value that is an
unordered set
of unique space-separated tokens which are ASCII case-insensitive. Each
value must 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 "0" (U+0030) 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.
The any keyword represents
that the resource contains a scalable icon, e.g. as provided by an
SVG image.
The keywords specified on the sizes attribute must not represent icon sizes
that are not actually available in the linked resource.
The following snippet shows the top part of an application with several icons.
<!DOCTYPE HTML> <html> <head> <title>lsForums — Inbox</title> <link rel=icon href=favicon.png sizes="16x16" type="image/png"> <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> <link rel=icon href=iphone.png sizes="57x57" type="image/png"> <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml"> <link rel=stylesheet href=lsforums.css> <script src=lsforums.js></script> <meta name=application-name content="lsForums"> </head> <body> ...
For historical reasons, the icon keyword may be preceded by the keyword
"shortcut". If the "shortcut" keyword is present, it must be come immediately
before the icon keyword and the two keywords must be
separated by only a single U+0020 SPACE character.
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.
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.
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]
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.
tag"The tag keyword may be used with a and area elements. This keyword creates a
hyperlink.
The tag keyword indicates that the tag that
the referenced document represents applies to the current
document.
Since it indicates that the tag applies to the current document, it would be inappropriate to use this keyword in the markup of a tag cloud, which lists the popular tags across a set of pages.
This document is about some gems, and so it is tagged
with "http://en.wikipedia.org/wiki/Gemstone"
to unambiguously categorise it as applying to the "jewel" kind of
gems, and not to, say, the towns in the US, the Ruby package
format, or the Swiss locomotive class:
<!DOCTYPE HTML> <html> <head> <title>My Precious</title> </head> <body> <header><h1>My precious</h1> <p>Summer 2012</p></header> <p>Recently I managed to dispose of a red gem that had been bothering me. I now have a much nicer blue sapphire.</p> <p>The red gem had been found in a bauxite stone while I was digging out the office level, but nobody was willing to haul it away. The same red gem stayed there for literally years.</p> <footer> Tags: <a rel=tag href="http://en.wikipedia.org/wiki/Gemstone">Gemstone</a> </footer> </body> </html>
In this document, there are two articles. The
"tag" link, however, applies to the whole page
(and would do so wherever it was placed, including if it was within
the article elements).
<!DOCTYPE HTML>
<html>
<head>
<title>Gem 4/4</title>
</head>
<body>
<article>
<h1>801: Steinbock</h1>
<p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
</article>
<article>
<h1>802: Murmeltier</h1>
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
alt="The 802 was red with pantographs and tall vents on the side.">
<figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
</figure>
<p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
</article>
<p class="topic"><a rel=tag href="http://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
</body>
</html>
Some documents form part of a sequence of documents.
A sequence of documents is one where each document can have a previous sibling and a next sibling. A document with no previous sibling is the start of its sequence, a document with no next sibling is the end of its sequence.
A document may be part of multiple sequences.
next"The next keyword may be used with link, a, 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.
Extensions to the predefined set of link types may be registered in the microformats wiki existing-rel-values page. [MFREL]
Anyone is free to edit the microformats wiki existing-rel-values 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) character, it must also be an absolute URL.
linkOne of the following:
link elements.link element; it creates a hyperlink.link element; it creates an external resource link.a and areaOne 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.
Types defined as extensions in the
microformats wiki existing-rel-values 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. [MFREL]
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 August 4th</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.
HTML does not have a good way to mark up graphs, so descriptions
of interactive conversations from games are more difficult to mark
up. This example shows one possible convention using dl elements to list the possible responses at
each point in the conversation. Another option to consider is
describing the conversation in the form of a DOT file, and
outputting the result as an SVG image to place in the document.
[DOT]
<p> Next, you meet a fisherman. You can say one of several greetings:
<dl>
<dt> "Hello there!"
<dd>
<p> He responds with "Hello, how may I help you?"; you can respond with:
<dl>
<dt> "I would like to buy a fish."
<dd> <p> He sells you a fish and the conversation finishes.
<dt> "Can I borrow your boat?"
<dd>
<p> He is surprised and asks "What are you offering in return?".
<dl>
<dt> "Five gold." (if you have enough)
<dt> "Ten gold." (if you have enough)
<dt> "Fifteen gold." (if you have enough)
<dd> <p> He lends you his boat. The conversation ends.
<dt> "A fish." (if you have one)
<dt> "A newspaper." (if you have one)
<dt> "A pebble." (if you have one)
<dd> <p> "No thanks", he replies. Your conversation options
at this point are the same as they were after asking to borrow
his boat, minus any options you've suggested before.
</dl>
</dd>
</dl>
</dd>
<dt> "Vote for me in the next election!"
<dd> <p> He turns away. The conversation finishes.
<dt> "Sir, are you aware that your fish are running away?"
<dd>
<p> He looks at you skeptically and says "Fish cannot run, sir".
<dl>
<dt> "You got me!"
<dd> <p> The fisherman sighs and the conversation ends.
<dt> "Only kidding."
<dd> <p> "Good one!" he retorts. Your conversation options at this
point are the same as those following "Hello there!" above.
<dt> "Oh, then what are they doing?"
<dd> <p> He looks at his fish, giving you an opportunity to steal
his boat, which you do. The conversation ends.
</dl>
</dd>
</ul>
HTML does not have a dedicated mechanism for marking up footnotes. Here are the recommended alternatives.
For
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="http://dev.w3.org/html5/spec/single-page.html#fn1" id="r1">[1]</a></sup> <p> Interviewer: You told me you did! ... <section> <p id="fn1"><a href="http://dev.w3.org/html5/spec/single-page.html#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="http://dev.w3.org/html5/spec/single-page.html#fn1">1</a></sup> <tr> <td> Routines, chorus scenes<sup><a href="http://dev.w3.org/html5/spec/single-page.html#fn2">2</a></sup> <td> Undisclosed <td> Undisclosed <tr> <td> Dining<sup><a href="http://dev.w3.org/html5/spec/single-page.html#fn3">3</a></sup> <td> Camelot <td> Cost of ham, jam, and spam<sup><a href="http://dev.w3.org/html5/spec/single-page.html#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>