Contents
HTML offers many of the conventional publishing idioms for rich text andstructured documents, but what separates it from most other markup languages isits features for hypertext and interactive documents. This section introducesthelink (or hyperlink, or Web link), the basic hypertext construct. Alink is a connection from one Web resource to another. Although a simpleconcept, the link has been one of the primary forces driving the success of theWeb.
Alink has two ends -- called
The default behavior associated with a link is the retrieval ofanother Web resource. This behavior is commonly and implicitlyobtained by selecting the link (e.g., by clicking, through keyboard input,etc.).
The following HTML excerpt containstwo links, onewhose destination anchor is an HTML document named "chapter2.html" and theother whose destination anchor is a GIF image in the file "forest.gif":
<BODY>...some text...<P>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 keyboardinput, voice commands, etc.), users may visit these resources. Note that thehrefattribute in each source anchor specifies the address of the destination anchorwith a URI.
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 URI addressing thisanchor must include the name as itsfragment identifier.
Destination anchors in HTML documents may be specified either by theAelement (naming it with thename attribute), or by any other element(naming with theid attribute).
Thus, for example, an author might create a table of contents whose entrieslink to header elements
<H1>Table of Contents</H1><P><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></H3>...section 2.1...
We may achieve the same effect by making the header elements themselves theanchors:
<H1>Table of Contents</H1><P><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>Introduction</H2>...section 1...<H2>Some background</H2>...section 2...<H3>On a more personal note</H3>...section 2.1...
By far the most commonuse of a link is to retrieve another Webresource, as illustrated in the previous examples. However, authors may insertlinks in their documents that express other relationships between resourcesthan simply "activate this link to visit that related resource". Links thatexpress other types of relationships have one or morelink types specified in their source anchor.
Theroles of a link defined byA orLINK are specified via therelandrev attributes.
For instance, links defined by theLINK element may describe the positionof a document within a series of documents. In the following excerpt, linkswithin the document entitled "Chapter 5" point to the previous and nextchapters:
<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 "prev" and that of the second is "next"(two of several recognizedlink types).Links specified byLINK arenot rendered with the document'scontents, although user agents may render them in other ways (e.g., asnavigation tools).
Even if they are not used for navigation, these links may be interpreted ininteresting ways. For example, a user agent that prints a series of HTMLdocuments as a single document may use this link information as the basis offorming a coherent linear document. Further information is given below on usinglinks for the benefit of search engines.
Although several HTML elements and attributes create links to otherresources (e.g., the
When theA element's
The retrieved resource may be handled by the user agent in several ways: byopening a new HTML document in the same user agent window, opening a new HTMLdocument in a different window, starting a new program to handle the resource,etc. Since theA element has content (text, images, etc.), user agents may renderthis content in such a way as to indicate the presence of a link (e.g., byunderlining the content).
When thename or
Authors may set the
TheLINK element defines a relationship between the current document andanother resource. Although
Thetitle attribute may be set for bothA andLINK toadd information about the nature of a link. This information may be spoken by auser agent, rendered as a tool tip, cause a change in cursor image, etc.
Thus, we may augment aprevious example bysupplying a title for each link:
<BODY>...some text...<P>You'll find a lot more in <A href="chapter2.html" title="Go to chapter two">chapter two</A>.<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 ofthe enchanted forest.</A></BODY>
Since links may point to documents encoded with differentcharacter encodings, theA andLINKelements support the
Thehreflang attribute provides user agents withinformation about the language of a resource at the end of a link, just as thelang attribute provides information about the language of anelement's content or attribute values.
Armed with this additional knowledge, user agents should be able to avoidpresenting "garbage" to the user. Instead, they may either locate resourcesnecessary for the correct presentation of the document or, if they cannotlocate the resources, they should at least warn the user that the document willbe unreadable and explain the cause.
<!ELEMENTA - - (%inline;)* -(A) -- anchor --><!ATTLIST A%attrs; --%coreattrs,%i18n,%events --charset%Charset; #IMPLIED -- char encoding of linked resource --type%ContentType; #IMPLIED -- advisory content type --nameCDATA #IMPLIED -- named link end --href%URI; #IMPLIED -- URI for linked resource --hreflang%LanguageCode; #IMPLIED -- language code --rel%LinkTypes; #IMPLIED -- forward link types --rev%LinkTypes; #IMPLIED -- reverse link types --accesskey%Character; #IMPLIED -- accessibility key character --shape%Shape; rect -- for use with client-side image maps --coords%Coords; #IMPLIED -- for use with client-side image maps --tabindexNUMBER #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
EachA element defines an anchor
Authors may also create an
In the example that follows, theA element defines a link. The source anchor isthe 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 auser activates this link in a user agent, the user agent will retrieve theresource, in this case, an HTML document.
User agents generally render links in such a way as to make themobvious to users (underlining, reverse video, etc.). The exact renderingdepends on the user agent. Rendering may vary according to whether the user hasalready visited the link or not. A possible visual rendering of the previouslink might be:
For more information about W3C, please consult the W3C Web site. ~~~~~~~~~~~~
To tell user agents explicitly what the character encoding of thedestination page is, set thecharset 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 anchorone.". Usually, the contents ofA are not rendered in any special way whenAdefines an anchor only.
Having defined the anchor, we may link to it from the same or anotherdocument. URIs that designate anchors contain a "#" character followed by theanchor name (thefragmentidentifier). Here are some examples of such URIs:
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...
TheA element in the following example specifies a link (withhref)and creates a named anchor (withname) 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 PNGimage). Activating the link should cause the image resource to be retrievedfrom the Web (and possibly displayed if the system has been configured to doso).
Note. User agents should be able to find anchorscreated by emptyA elements, but some fail to do so. For example, some useragents 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 thename oridattribute when used in the context of anchors. Anchor names must observe thefollowing rules:
Thus, the following example is correct with respect to string matching andmust be considered a match by user agents:
<P><A href="#xxx">...</A>...more document...<P><A name="xxx">...</A>
ILLEGAL EXAMPLE:
The following example is illegal with respect to uniqueness since the two namesare the same except for case:
<P><A name="xxx">...</A><P><A name="XXX">...</A>
Although the following excerpt is legal HTML, the behavior of the user agentis not defined; some user agents may (incorrectly) consider this a match andothers may not.
<P><A href="#xxx">...</A>...more document...<P><A name="XXX">...</A>
Anchor names should be restricted to ASCIIcharacters. Please consult the appendix for more information aboutnon-ASCII characters in URIattribute values.
Links and anchors defined by theA element must not be nested; anA elementmust not contain any other
Since the DTD defines theLINK element to be empty,LINKelements may not be nested either.
Theid attribute may be used to create an anchor at the start tag of anyelement (including theA element).
This example illustrates the use of theid attribute to position an anchor inanH2 element. The anchor is linked to via theAelement.
You may read more about this in <A href="#section2">Section Two</A>....later in the document<H2>Section Two</H2>...later in the document<P>Please refer to <A href="#section2">Section Two</A> abovefor more details.
The following example names a destination anchor with theidattribute:
I just returned from vacation! Here's a<A>photo of my family at the lake.</A>.
Theid andname attributes share the same
ILLEGAL EXAMPLE:
The following excerpt is illegal HTML since these attributes declare the samename twice in the same document.
<A href="#a1">...</A>...<H1>...pages and pages...<A name="a1"></A>
The following example illustrates thatid andnamemust be the same when both appear in an element's start tag:
<P><A name="a1" href="#a1">...</A>
Because of its specification in the HTML DTD, thenameattribute may containcharacter references. Thus, the valueDürst is avalidname attribute value, as isDürst . Theidattribute, on the other hand, may not contain character references.
Useid or
A reference to an unavailable or unidentifiable resource is an error.Although user agents may vary in how they handle such an error, we recommendthe following behavior:
<!ELEMENTLINK - O EMPTY -- a media-independent link --><!ATTLIST LINK%attrs; --%coreattrs,%i18n,%events --charset%Charset; #IMPLIED -- char encoding of linked resource --href%URI; #IMPLIED -- URI for linked resource --hreflang%LanguageCode; #IMPLIED -- language code --type%ContentType; #IMPLIED -- advisory content type --rel%LinkTypes; #IMPLIED -- forward link types --rev%LinkTypes; #IMPLIED -- reverse link types --media%MediaDesc; #IMPLIED -- for rendering on these media -- >
Start tag:required, End tag:forbidden
Attributes defined elsewhere
This element defines a link. UnlikeA, it may only appear in theHEADsection of a document, although it may appear any number of times. AlthoughLINKhas no content, it conveys relationship information that may be rendered byuser agents in a variety of ways (e.g., a tool-bar with a drop-down menu oflinks).
This example illustrates how severalLINK definitions may appear in theHEADsection of a document. The current document is "Chapter2.html". Therelattribute specifies the relationship of the linked document with the currentdocument. The values "Index", "Next", and "Prev" are explained in the sectiononlink types.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML><HEAD> <TITLE>Chapter 2</TITLE> <LINK rel="Index" href="../index.html"> <LINK rel="Next" href="Chapter3.html"> <LINK rel="Prev" href="Chapter1.html"></HEAD>...the rest of the document...
Therel andrev attributes play complementary roles -- therelattribute specifies a forward link and therev attribute specifies a reverselink.
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">
Both attributes may be specified simultaneously.
When theLINK element links an external style sheet to a document, thetype attribute specifies the style sheet language and themedia attribute specifies the intended rendering medium or media.User agents may save time by retrieving from the network only those stylesheets that apply to the current device.
Media types are furtherdiscussed in the section on style sheets.
Authors may use the
The examples below illustrate how language information, media types, andlink types may be combined to improve document handling by search engines.
In the following example, we use thehreflang attribute to tell searchengines where to find Dutch, Portuguese, and Arabic versions of a document.Note the use of the
<HEAD><TITLE>The manual in English</TITLE><LINK title="The manual in Dutch" type="text/html" rel="alternate" hreflang="nl" href="http://someplace.com/manual/dutch.html"><LINK title="The manual in Portuguese" type="text/html" rel="alternate" hreflang="pt" href="http://someplace.com/manual/portuguese.html"><LINK title="The manual in Arabic" type="text/html" rel="alternate" charset="ISO-8859-6" hreflang="ar" href="http://someplace.com/manual/arabic.html"><LINK lang="fr" title="La documentation en Français" type="text/html" rel="alternate" hreflang="fr" href="http://someplace.com/manual/french.html"></HEAD>
In the following example, we tell search engines where to find the printedversion of a manual.
<HEAD><TITLE>Reference manual</TITLE><LINK media="print" title="The manual in postscript" type="application/postscript" rel="alternate" href="http://someplace.com/manual/postscript.ps"></HEAD>
In the following example, we tell search engines where to find the frontpage of a collection of documents.
<HEAD><TITLE>Reference manual -- Page 5</TITLE><LINK rel="Start" title="The first page of the manual" type="text/html" href="http://someplace.com/manual/start.html"></HEAD>
Further information is given in the notes in the appendix onhelping search engines index your Website.
<!ELEMENTBASE - O EMPTY -- document base URI --><!ATTLIST BASEhref%URI; #REQUIRED -- URI that acts as base URI -- >
Start tag:required, End tag:forbidden
Attribute definitions
Attributes defined elsewhere
In HTML, links and references to external images, applets, form-processingprograms, style sheets, etc. are always specified by a URI. Relative URIs areresolved according to a base URI, whichmay come from a variety of sources. TheBASE element allows authors
When present, theBASE element must appear in theHEADsection of an HTML document, before any element that refers to an externalsource. The path information specified by theBASE element only affects URIs inthe document where the element appears.
For example, given the followingBASE declaration andAdeclaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML> <HEAD> <TITLE>Our Products</TITLE> <BASE href="http://www.aviary.com/products/intro.html"> </HEAD> <BODY> <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>? </BODY></HTML>
the relative URI "../cages/birds.gif" would resolve to:
http://www.aviary.com/cages/birds.gif
User agents must calculate the base URI for resolving relative URIsaccording to[RFC1808], section 3. The following describes how[RFC1808] applies specifically to HTML.
User agents must calculate the base URI according to the followingprecedences (highest priority to lowest):
Additionally, the
Note. For versions of HTTP that define a Link header,user agents should handle these headers exactly asLINKelements in the document. HTTP 1.1 as defined by[RFC2616] does notinclude a Link header field (refer to section 19.6.3).