12. Links12.1 Introduction to links and anchorsHTML 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 introducesthe link (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. A link has two ends -- called anchors -- and adirection. The link starts at the "source" anchor and points to the"destination" anchor, which may be any Web resource (e.g., an image, a videoclip, a sound bite, a program, an HTML document, an element within an HTMLdocument, etc.). 12.1.1 Visiting a linked resourceThe 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 contains two 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 the hrefattribute 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 its fragment identifier. Destination anchors in HTML documents may be specified either by the Aelement (naming it with the name attribute), or by any other element(naming with the id attribute). Thus, for example, an author might create a table of contents whose entrieslink to header elements H2, H3, etc., in the same document. Using the A element tocreate destination anchors, we would write: <H1>Daftar Isi</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>Daftar Isi</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 id="section1">Introduction</H2>...section 1...<H2 id="section2">Some background</H2>...section 2...<H3 id="section2.1">On a more personal note</H3>...section 2.1... 12.1.2 Other linkrelationshipsBy far the most common use 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 more link types specified in their source anchor. The roles of a link defined by A or LINK are specified via the reland rev attributes. For instance, links defined by the LINK 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 recognized link types).Links specified by LINK are not 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. 12.1.3 Specifying anchors and linksAlthough several HTML elements and attributes create links to otherresources (e.g., the IMG element, the FORM element, etc.), this chapter discusses links and anchorscreated by the LINK and A elements. The LINK element may only appear in thehead of a document. The A element may only appear in the body. When the A element's href attribute is set, the element defines a sourceanchor for 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 anchoris the Web resource. 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 the A 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 the name or id attributes of the A element are set, the elementdefines an anchor that may be the destination of other links. Authors may set the name and href attributes simultaneously in thesame A instance. The LINK element defines a relationship between the current document andanother resource. Although LINK has no content, the relationships it defines maybe rendered by some user agents. 12.1.4 Link titlesThe title attribute may be set for both A and LINK 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 a previous 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> 12.1.5 Internationalization and linksSince links may point to documents encoded with different character encodings, the A and LINKelements support the charset attribute. This attribute allows authors toadvise user agents about the encoding of data at the other end of the link. The hreflang 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. 12.2 The A elementStart tag: required, End tag: required Attribute definitions - name = cdata [CS]
- This attribute names the current anchor so that it may be the destinationof another link. The value of this attribute must be a unique anchor name. Thescope of this name is the current document. Note that this attribute shares thesame name space as the id attribute.
- href = uri [CT]
- This attribute specifies the location of a Web resource, thus defining alink between the current element (the source anchor) and the destination anchordefined by this attribute.
- hreflang = langcode [CI]
- This attribute specifies the base language of the resource designated by hrefand may only be used when href is specified.
- type = content-type [CI]
- This attribute gives an advisory hint as to the content type of the contentavailable at the link target address. It allows user agents to opt to use afallback mechanism rather than fetch the content if they are advised that theywill get content in a content type they do not support.
- Authors who use this attribute take responsibility to manage the risk thatit may become inconsistent with the content available at the link targetaddress.
- For the current list of registered content types, please consult [MIMETYPES].
- rel = link-types [CI]
- This attribute describes the relationship from the current document to theanchor specified by the href attribute. The value of this attribute is aspace-separated list of link types.
- rev = link-types [CI]
- This attribute is used to describe a reverse linkfrom the anchor specified by the href attribute to the current document. Thevalue of this attribute is a space-separated list of link types.
- charset = charset [CI]
- This attribute specifies the character encoding of the resource designatedby the link. Please consult the section on characterencodings for more details.
Attributes defined elsewhere - id, class (document-wide identifiers)
- lang (languageinformation), dir (textdirection)
- title (element title)
- style (inlinestyle information )
- shape and coords (imagemaps)
- onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events )
- target (targetframe information)
- tabindex (tabbing navigation)
- accesskey (access keys)
Each A element defines an anchor - The A element's content defines the position of the anchor.
- The name attribute names the anchor so that it may be the destination ofzero or more links (see also anchors with id).
- The href attribute makes this anchor the source anchor of exactly onelink.
Authors may also create an A element that specifies no anchors, i.e., thatdoesn't specify href, name, or id. Values for these attributes may beset at a later time through scripts. In the example that follows, the A 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 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 anchorone.". Usually, the contents of A are not rendered in any special way when Adefines 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 (the fragmentidentifier). Here are some examples of such URIs: - An absolute URI: http://www.mycompany.com/one.html#anchor-one
- A relative URI: ./one.html#anchor-one or one.html#anchor-one
- When the link is defined in the same document: #anchor-one
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 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 empty A 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> 12.2.1 Syntax of anchornamesAn anchor name is the value of either the name or idattribute when used in the context of anchors. Anchor names must observe thefollowing rules: - Uniqueness: Anchor names must beunique within a document. Anchor names that differ only in case may not appearin the same document.
- String matching: Comparisonsbetween fragment identifiers andanchor names must be done by exact (case-sensitive) match.
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. 12.2.2 Nested links are illegalLinks and anchors defined by the A element must not be nested; an A elementmust not contain any other A elements. Since the DTD defines the LINK element to be empty, LINKelements may not be nested either. 12.2.3 Anchors with theid attributeThe id attribute may be used to create an anchor at the start tag of anyelement (including the A element). This example illustrates the use of the id attribute to position an anchor inan H2 element. The anchor is linked to via the Aelement. 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<P>Please refer to <A href="#section2">Section Two</A> abovefor more details. The following example names a destination anchor with the idattribute: I just returned from vacation! Here's a<A id="anchor-two">photo of my family at the lake.</A>. The id and name attributes share the same name space. This means that they cannot bothdefine an anchor with the same name in the same document. It is permissible touse both attributes to specify an element's unique identifier for the followingelements: A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP. Whenboth attributes are used on a single element, their values must beidentical. ILLEGAL EXAMPLE:
The following excerpt is illegal HTML since these attributes declare the samename twice in the same document. <A href="#a1">...</A>...<H1 id="a1">...pages and pages...<A name="a1"></A> The following example illustrates that id and namemust be the same when both appear in an element's start tag: <P><A name="a1" id="a1" href="#a1">...</A> Because of its specification in the HTML DTD, the nameattribute may contain character references. Thus, the value Dürst is avalid name attribute value, as is Dürst . The idattribute, on the other hand, may not contain character references. Use id or name? Authors should consider the followingissues when deciding whether to use id or name for an anchor name: - The id attribute can act as more than just an anchor name (e.g., stylesheet selector, processing identifier, etc.).
- Some older user agents don't support anchors created with the idattribute.
- The name attribute allows richer anchor names (with entities).
12.2.4 Unavailable andunidentifiable resourcesA 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: - If a user agent cannot locate a linked resource, it should alert theuser.
- If a user agent cannot identify the type of a linked resource, it shouldstill attempt to process it. It should alert the user and may allow the user tointervene and identify the document type.
12.3 Document relationships: the LINK elementStart tag: required, End tag: forbidden Attributes defined elsewhere - id, class (document-wide identifiers)
- lang (languageinformation), dir (textdirection)
- title (element title)
- style (inlinestyle information )
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events )
- href, hreflang, type, rel, rev (links andanchors)
- target (targetframe information)
- media (headerstyle information)
- charset(characterencodings)
This element defines a link. Unlike A, it may only appear in the HEADsection of a document, although it may appear any number of times. Although LINKhas 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 several LINK definitions may appear in the HEADsection of a document. The current document is "Chapter2.html". The relattribute specifies the relationship of the linked document with the currentdocument. The values "Index", "Next", and "Prev" are explained in the sectionon link 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... 12.3.1 Forward and reverse linksThe rel and rev attributes play complementary roles -- the relattribute specifies a forward link and the rev 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. 12.3.2 Links and external style sheetsWhen 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 stylesheets that apply to the current device. Media types are furtherdiscussed in the section on style sheets. 12.3.3 Links and search enginesAuthors may use the LINK element to provide a variety of information tosearch engines, including: - Links to alternate versions of a document, written in another humanlanguage.
- Links to alternate versions of a document, designed for different media,for instance a version especially suited for printing.
- Links to the starting page of a collection of documents.
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 the hreflang attribute to tell searchengines where to find Dutch, Portuguese, and Arabic versions of a document.Note the use of the charset attribute for the Arabic manual. Note also theuse of the lang attribute to indicate that the value of the titleattribute for the LINK element designating the French manual is in French. <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 on helping search engines index your Website. 12.4 Path information: the BASE element<!ELEMENT BASE - O EMPTY -- document base URI --><!ATTLIST BASE href %URI; #REQUIRED -- URI that acts as base URI -- > Start tag: required, End tag: forbidden Attribute definitions - href = uri [CT]
- This attribute specifies an absolute URI that acts as the base URI forresolving relative URIs.
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. The BASE element allows authors to specify a document's base URI explicitly. When present, the BASE element must appear in the HEADsection of an HTML document, before any element that refers to an externalsource. The path information specified by the BASE element only affects URIs inthe document where the element appears. For example, given the following BASE declaration and Adeclaration: <!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 12.4.1 Resolving relative URIsUser 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): - The base URI is set by the BASE element.
- The base URI is given by meta data discovered during a protocolinteraction, such as an HTTP header (see [RFC2616]).
- By default, the base URI is that of the current document. Not all HTMLdocuments have a base URI (e.g., a valid HTML document may appear in an emailand may not be designated by a URI). Such HTML documents are considerederroneous if they contain relative URIs and rely on a default base URI.
Additionally, the OBJECT and APPLET elements define attributes thattake precedence over the value set by the BASE element. Please consult thedefinitions of these elements for more information about URI issues specific tothem. Note. For versions of HTTP that define a Link header,user agents should handle these headers exactly as LINKelements in the document. HTTP 1.1 as defined by [RFC2616] does notinclude a Link header field (refer to section 19.6.3). | 
