Contents
HTML offers many of the conventional publishing idioms for rich text and structured documents, but what separates it from most other markup languages is its features for hypertext and interactive documents. This section introduces the link (or hyperlink, or Web link), the basic hypertext construct. A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.
A link has two ends --- called anchors --- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).
The most common use of a link is to retrieve another resource on the Web.
The following HTML excerpt contains two links, one whose destination anchor is an HTML document named "chapter2.html" and the other whose destination anchor is a GIF image in the file "forest.gif":
<BODY> ...some text... You'll find a lot more in <A href="./chapter2.html">chapter two</A>. See also this <A href="../images/forest.gif">map of the enchanted forest.</A> </BODY>
By activating these links (by clicking with the mouse, through keyboard input, voice commands, etc.), users may visit these resources. Note that an attribute in each source anchor specifies the address of the destination anchor with a URL.
The destination anchor of a link may be an element within an HTML document. The destination anchor must be given an anchor name and any URL addressing this anchor must include the name as its fragment identifier.
Destination anchors in HTML documents may be specified either by the A element (naming it with the id attribute), or by any other element (naming with the id attribute).
Thus, for example, an author might create a table of contents whose entries link to header elements H2, H3, etc., in the same document. Using the A element to create destination anchors, we would write:
<BODY> <H1>Table of Contents</H1> <A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body... <H2><A name="section1">Introduction</A></H2> ...section 1... <H2><A name="section2">Some background</A></H2> ...section 2... <H3><A name="section2.1">On a more personal note</A></H2> ...section 2.1...
We may achieve the same effect by making the header elements themselves the anchors:
<BODY> <H1>Table of Contents</H1> <A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body... <H2 id="section1">Introduction</H2> ...section 1... <H2 id="section1">Some background</H2> ...section 2... <H3 id="section1">On a more personal note</H3> ...section 2.1...
By far the most common use of a link is to retrieve another Web resource, as illustrated in the previous examples. However, authors may insert links in their documents that express other relationships between resources than simply "activate this link to visit that related resource". Links that express other types of relationships have one or more link type specified in their source anchor.
For instance, links defined by the LINK element may describe the position of a document within a series of documents. In the following excerpt, links within the document entitled "Chapter 5" point to the previous and next chapters:
<HEAD> ...other head information... <TITLE>Chapter 5</TITLE> <LINK rel="prev" href="chapter4.html"> <LINK rel="next" href="chapter6.html"> </HEAD>
The link type of the first link is "next" and that of the second is "prev" (two of several recognized link types). Links specified by LINK are not rendered with the document's contents, although user agents may render them in other ways (e.g., as navigation tools).
Even if they are not used for navigation, these links may be interpreted in interesting ways. For example, a user agent that prints a series of HTML documents as a single document may use this link information as the basis of forming a coherent linear document.
There are two HTML elements that create links: LINK and A. The LINK element may only appear in the head of a document. The A element may only appear in the body.
When the A element's href attribute is set, the element specifies a link that may be activated by the user to retrieve a Web resource. The source anchor is the location of the A instance and the destination anchor is the Web resource.
The retrieved resource may be handled by the user agent in several ways: by opening a new HTML document in the same user agent window, opening a new HTML document in a different window, starting a new program to handle the resource, etc. Since the A element has content (text, images, etc.), user agents may render this content in such a way as to indicate the presence of a link (e.g., by underlining the content).
When the name attribute of the A element is set, the element specifies an anchor that may be the destination of other links.
Authors may set the name and href attributes simultaneously in the same A instance.
The LINK element defines a relationship between the current document and another resource. Although LINK has no content, the relationships it defines may be rendered by some user agents.
The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.
Thus, we may augment a previous example by supplying a title for each link:
<BODY> ...some text... Go to <A href="./chapter2.html" title="Get chapter two.">chapter two</A>. See also this <A href="../images/forest.gif" title="GIF image of enchanted forest">map of the enchanted forest.</A> </BODY>
Since links may point to documents written in different languages (possibly with different script direction) and using different character encodings, the A and LINK elements support the lang (language), and charset (character encoding) attributes. These attributes allow authors to advise user agents about the nature of the data at the other end of the link.
Armed with this additional knowledge, user agents should be able to avoid presenting "garbage" to the user. Instead, they may either locate resources necessary for the correct presentation of the document or, if they cannot locate the resources, they should at least warn the user that the document will be unreadable and explain the cause.
<!ELEMENT A - - (%inline;)* -(A) -- anchor --> <!ATTLIST A %attrs; -- %coreattrs, %i18n, %events -- charset CDATA #IMPLIED -- char encoding of linked resource -- name CDATA #IMPLIED -- named link end -- href %URL; #IMPLIED -- URL for linked resource -- target CDATA #IMPLIED -- where to render resource -- rel CDATA #IMPLIED -- forward link types -- rev CDATA #IMPLIED -- reverse link types -- accesskey CDATA #IMPLIED -- accessibility key character -- shape %Shape rect -- for use with OBJECT SHAPES -- coords %Coords #IMPLIED -- for use with OBJECT SHAPES -- tabindex NUMBER #IMPLIED -- position in tabbing order -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- >
Start tag: required, End tag: required
Attribute definitions
Attributes defined elsewhere
The A element defines either one or two anchors:
If the name attribute is set, it names location of the A element so that it may also be the destination of other links.
In the example that follows, the A element defines a link. The source anchor is the text "W3C Web site" and the destination anchor is "http://www.w3.org/":
For more information about W3C, please consult the <A href="http://www.w3.org/">W3C Web site</A>
This link designates the home page of the World Wide Web Consortium. When a user activates this link in a user agent, the user agent will retrieve the resource, in this case, an HTML document.
User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). Rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not. One possible rendering of the previous link might be:
For more information about W3C, please consult the W3C Web site.
~~~~~~~~~~~~
To tell user agents explicitly what the character encoding of the destination page is, set the charset attribute:
For more information about W3C, please consult the <A href="http://www.w3.org/" charset="ISO-8859-1">W3C Web site</A>
Suppose we define an anchor named "anchor-one" in the file "one.html".
...text before the anchor... <A name="anchor-one">This is the location of anchor one.</A> ...text after the anchor...
This creates an anchor around the text "This is the location of anchor one". Usually, the contents of A are not rendered in any special way when A defines an anchor only.
Having defined the anchor, we may link to it from the same or another document. URLs that designate anchors end with "#" followed by the anchor name. Here are some examples of such URLs:
Thus, a link defined in the file "two.html" in the same directory as "one.html" would refer to the anchor as follows:
...text before the link... For more information, please consult <A href="./one.html#anchor-one"> anchor one</A>. ...text after the link...
The A element in the following example specifies a link (with href) and creates a named anchor (with name) simultaneously:
I just returned from vacation! Here's a <A name="anchor-two" href="http://www.somecompany.com/People/Ian/vacation/family.png"> photo of my family at the lake.</A>.
This example contains a link to a different type of Web resource (a PNG image). Activating the link should cause the image resource to be retrieved from the Web (and possibly displayed if the system has been configured to do so).
Note: Some user agents fail to find anchors represented by empty A elements. For example, some user agents may not find the "empty-anchor" in the following HTML fragment:
<A name="empty-anchor"></A> <EM>...some HTML...</EM> <A href="#empty-anchor">Link to empty anchor</A>
An anchor name is the value of either the name or id attribute when used in the context of anchors. Anchor names must observe the following rules:
Thus, the following example is correct with respect to string matching and must be considered a match by user agents:
<A href="#xxx">...>/A> ...more document... <A name="xxx">...>/A>
ILLEGAL EXAMPLE:
The following example is illegal with respect to uniqueness since
the two names are the same except for case:
<A name="xxx">...>/A> <A name="XXX">...>/A>
Although the following excerpt is considered legal HTML, the behavior of the user agent is not defined; some user agents may consider this a match and others may not.
<A href="#xxx">...>/A> ...more document... <A name="XXX">...>/A>
Authors may create links that do not lead to another document but instead cause email to be sent to an email address. When the link is activated, user agents should cause a mail program to open that includes the destination email address in the "To:" field.
To cause email to be sent when a link is activated, specify a MAILTO URL as the value of the href attribute.
In this example, when the user activates the link, the user agent should open a mail program with the address "joe@someplace.com" in the "To:" field.
...this is text... For all comments, please send email to <A href="mailto:joe@someplace.com">Joe Cool</A>.
Links and anchors defined by the A element may not be nested.
ILLEGAL EXAMPLE:
The following example illustrates nested links. Nested links are
not permitted.
This text contains <A name="outer-anchor" href="next-outer.html">an outer anchor and and link and <A name="inner-anchor" href="next-inner.html">an inner anchor and link.</A></A>
The id attribute may be used to create anchor at the start tag of any element.
This example illustrates the use of the id attribute to position an anchor in an H2 element. The anchor is linked to via the A element.
You may read more about this in <A href="#section2">Section Two</A>. ...later in the document <H2 id="section2">Section Two</H2> ...later in the document Please refer to <A href="#section2">Section Two</A> above for more details.
ILLEGAL EXAMPLE:
The following excerpt is illegal HTML since these attributes
declare the same name twice in the same document.
<BODY> <A href="#a1">...</A> ... <H1 id="a1"> ...pages and pages... <A name="a1"></A> </BODY>
Because of its specification in the HTML DTD, the name attribute may contain entities. Thus, the value Dürst is a valid name, as is Düaut;rst . The id attribute, on the other hand, may not contain entities.
<!ELEMENT LINK - O EMPTY -- a media-independent link --> <!ATTLIST LINK %attrs; -- %coreattrs, %i18n, %events -- charset CDATA #IMPLIED -- char encoding of linked resource -- href %URL; #IMPLIED -- URL for linked resource -- rel CDATA #IMPLIED -- forward link types -- rev CDATA #IMPLIED -- reverse link types -- type %ContentType; #IMPLIED -- advisory Internet content type -- media CDATA #IMPLIED -- for rendering on these media -- target CDATA #IMPLIED -- where to render linked resource -- >
Start tag: required, End tag: forbidden
Attributes defined elsewhere
This element, which must appear in the HEAD section of a document (any number of times), defines a media-independent link. Although LINK has no content, it conveys relationship information that may be rendered by some user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of links).
This example illustrates how several LINK definitions may appear in the HEAD section of a document. The rel and rev attributes specify where the source and destination are for each link. The values "Index", "Next", and "Prev" are explained in the section on link types.
<HTML> <HEAD> <LINK rel="Index" href="../index.html"> <LINK rel="Next" href="Chapter3.html"> <LINK rel="Prev" href="Chapter1.html"> </HEAD> ...the rest of the document...
The rel and rev attributes play complementary roles. Consider two documents A and B.
Document A: <LINK href="docB" rel="foo">
Has exactly the same meaning as:
Document B: <LINK href="docA" rev="foo">
A link's types are defined by the values of its rel and rev attributes. Both attributes may be specified in the same element start tag. White space characters are not permitted within link types, since these are used as delimiters between one type and the next.
Authors may use the following recognized link types, listed here with their conventional interpretations. These are defined as being case insensitive, i.e., "Alternate" has the same meaning as "alternate".
Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile to cite the conventions used to define the link types. Please see the profile attribute of the HEAD element for more details.
User agents, search engines, etc. may interpret these link types in a variety of ways. For example, user agents may provide access to linked documents through a navigation bar.
When the LINK element links an external style sheet to a document, the type attribute specifies the style sheet language and the media attribute specifies the intended rendering medium or media. User agents may save time by retrieving from the network only those style sheets that apply to the current device.
Media types are further discussed in the section on style sheets.
Authors may use the LINK element to provide a variety of information to search engines, including:
The examples below illustrate how language information, media types, and link types may be combined to improve document handling by search engines.
In the following example, we tell search engines where to find Dutch, Portuguese, and Arabic versions of a document.
<HEAD>
<LINK lang="nl" title="The manual in Dutch"
rel="alternate"
href="http://someplace.com/manual/dutch.html">
<LINK lang="pt" title="The manual in Portuguese"
rel="alternate"
href="http://someplace.com/manual/portuguese.html">
<LINK lang="ar" title="The manual in Arabic"
dir="rtl"
rel="alternate"
href="http://someplace.com/manual/arabic.html">
</HEAD>
In the following example, we tell search engines where to find the printed version of a manual.
<HEAD>
<LINK media="print" title="The manual in postscript"
rel="alternate"
href="http://someplace.com/manual/postscript.ps">
</HEAD>
In the following example, we tell search engines where to find the front page of a collection of documents.
<HEAD>
<LINK rel="Start" title="The first page of the manual"
href="http://someplace.com/manual/postscript.ps">
</HEAD>
<!ELEMENT BASE - O EMPTY -- document base URL --> <!ATTLIST BASE href %URL; #REQUIRED target CDATA #IMPLIED -- where to render linked resource -- >
Start tag: required, End tag: forbidden
Attribute definitions
Attributes defined elsewhere
It is important to consider the issue of paths when linking to another document or including an object. In HTML, path information is always specified by a URL. Relative URLs are resolved according to a base URL, which may come from a variety of sources (see the section on relative URLs for information about sources of base URLs). The BASE element allows authors to specify a document's base URL explicitly.
When present, the BASE element must appear in the HEAD section of an HTML document. The scope of the BASE element is the current document only.
For example, given the following BASE declaration and A declaration:
<HTML> <HEAD> <TITLE>Our Products</TITLE> <BASE href="http://www.aviary.com/products/intro.html"> </HEAD> <BODY> Have you see our <A href="../cages/birds.gif">Bird Cages</A>? </BODY> </HTML>
the relative URL "../cages/birds.gif" would resolve to:
http://www.acme.com/cages/birds.gif