 |
Chapter 6 |  |
|
Chapter 6 | |
Use the HTML <a> tag to create links to other documents and to name anchors for fragment indentifiers within documents.
HTML authors use the <a> tag most commonly with its href attribute to create a hypertext link, or hyperlink, for short, to another place in the same document or to another document. In these cases, the current document is the source[6] of the link; the value of the href attribute, a URL, is the target.
[6] You may run across the terms ``head'' and ``tail,'' which reference the target and source of a hyperlink. This naming scheme assumes that the referenced document (the head) has many tails that are embedded in many referencing documents throughout the Web. We find this naming convention confusing and stick to the concept of source and target documents throughout this book.
The other way you can use the <a> tag is with the name attribute to mark a hyperlink target, or fragment identifier, in an HTML document.
It is possible to use both the name and href attributes within a single <a> tag, defining a link to another document and a fragment identifier within the current document. We recommend against this, since it overloads a single tag with multiple functions, and some browsers may not be able to handle it.
Instead, use two <a> tags when such a need arises. Your HTML source will be easier to understand and modify, and will work better across a wider range of browsers.
Between the <a> tag and its required end tag, you may put only regular text, line breaks, images, and headings. The browser renders all of these elements normally, but with the addition of some special effects to indicate that it is a hyperlink to another document. For instance, the popular graphical browsers typically underline and color the text and draw a colored border around images that are enclosed by <a> tags.
While the allowed content may seem restricted (the inability to place style markup within an <a> tag is a bit onerous, for instance), most browsers let you put just about anything within an <a> tag that makes sense. To be compliant with the HTML standard, place the <a> tag inside other markup tags, not the opposite. For example, while most browsers make sense of either variation on this anchor theme:
To subscribe to <cite><a href="ko.html">Kumquat Online</a></cite>, To subscribe to <a href="ko.html"> <cite>Kumquat Online</cite></a>,
only the first example is technically correct.
Use the href attribute to specify the URL of the target of the link. Its value is any valid document URL, absolute or relative, including a fragment identifier. If the user selects the contents of the <a> tag, the browser will retrieve and display the document indicated by the URL specified by the href attribute. [URLs, 6.2]
A simple <a> tag that references another document might be:
The <a href="http:growing_season.html">growing season</a> for kumquats in the Northeast.
which appears in the Netscape display as shown in Figure 6-1.
Notice that the phrase ``growing season'' is specially rendered by the browser, letting the user know that it is a link to another document. Users also typically have the option to specially set the text color of the link and have the color change when a link is taken; blue initially and then red after it has been selected at least once, for instance.
More complex anchors might include images:
![[Graphic: Figure 6-1]](figs/uhtml0601.gif)
<ul>
<li><a href="pruning_tips.html">
<img src="pics/new.gif"> New pruning tips!</a>
<li><a href="xhistory.html">
<img src="pics/new2.gif">Kumquats throughout history</a>
</ul>
Mosaic, as do most graphical browsers, places a special border around images that are part of an anchor, as shown in Figure 6-2.
The method attribute tells the browser to specially process the document referenced by the href attribute. The value of the method is a space-separated list of names, each representing a particular document-processing method, usually an application name. The HTML standard does not define what these names might be; they are browser dependent.
For example, suppose you have a FrameMaker document called harvesting.doc that you want the browser to specially display. The link in the source document would be written:
<a href=" harvesting.doc" method="Frame">document</a>
telling the browser to expect and display a FrameMaker document when the user selects the link. The browser might augment the rendering of the anchor head, too, perhaps by adding a tiny FrameMaker icon, to tell the user what to expect when accessing that link.
In practice, the method attribute is rarely used. It is too dependent on the browser understanding how to deal with and be able to process the document according to the specified methods. Most often, authors include the method attribute in the <a> tag so that the browser might specially alter the appearance of the <a> tag's head content to indicate the particular method being used.
This method attribute only makes sense when used in conjunction with the href attribute; it is ignored when the <a> tag contains the name attribute.
Use the name attribute to place a fragment identifier within an HTML document. Once created, the fragment identifier becomes a potential target of a link.
An easy way to think of a fragment identifier is as the HTML analog of the goto statement label common in many programming languages. The name attribute within the <a> tag places a label within a document. When that label is used in a link to that document, it is the equivalent of telling the browser to goto that label.
The value of the name attribute is any character string, enclosed in quotes; for example:
<h2><a name="Pruning">Pruning Your Kumquat Tree</a></h2>
Notice that we set the anchor in a section header of presumably a large document. It's a practice we encourage you use for all major sections of your work for easier reference and future smart processing, such as automated extraction of topics.
The following link, when taken by the user:
<a href="growing_guide.html#Pruning">
jumps directly to the section of the document we named above.
The contents of the <a> tag are not displayed in any special way with the name attribute.
Technically, you do not have to put any document content within the <a> tag with the name attribute since it simply marks a location in the document. In practice, some browsers ignore the tag unless some document content--a word or phrase, even an image--is between the <a> and </a> tags. For this reason, it's probably a good idea to have at least one displayable element in the body of any <a> tag.
The rel and rev attributes express a formal relationship and direction between source and target documents. The rel attribute specifies the relationship from the source document to the target; the rev attribute specifies the relationship from the target to the source. Both attributes can be placed in a single <a> tag, and the browser may use them to specially alter the appearance of the anchor content or to automatically construct document navigation menus. Other tools also may use these attributes to build special link collections, tables of contents, and indexes.
The value of either the rel or rev attribute is a space-separated list of relationships. The actual relationship names and their meanings are up to you: they are not formally addressed by the HTML standard. For example, a document that is part of a sequence of documents might include its relationship in a link:
<a href="part-14.html" rel=next rev=prev>
The relationship from the source to the target is that of moving to the next document; the reverse relationship is that of moving to the previous document.
These document relationships are also used in the <link> tag in the document <head>. The <link> tag establishes the relationship without actually creating a link to the target document; the <a> tag creates the link and imbues it with the relationship attributes. [<link>, 6.7.2]
Commonly used document relationships appear in the list below.
Links to the next document in a collection
Links to the previous document in a collection
Links to the top-level document in a collection
Links to a collection's table of contents
Links to the document above the source
Links to a document below the source
Links to the index for this document
Links to the glossary for this document
In general, few browsers take advantage of these attributes to modify the link appearance. However, these attributes are a great way to document links you create, and we recommend you take the time to insert them whenever possible.
The latest version of Netscape Navigator (2.0) supports a special HTML document type known as a frame. A frame document may display several HTML documents simultaneously. The target attribute for the <a> tag lets you redirect the contents of a hyperlink document to load and display in a different frame or window from that which contains the hyperlink. For more information, see 10.6.1.
The title attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotes. The browser might use it when displaying the link, perhaps flashing the title when the mouse passes over the link. The browser might also use the title attribute when adding this link to a user's hotlist.
The title attribute is especially useful for referencing an otherwise unlabeled resource, such as an image or a non-HTML document. For example, the browser might include the following title on this otherwise wordless image display page:
<a href="pics/kumquat.gif" title="A photograph of the Noble Fruit">
Ideally, the value specified should match the title of the referenced document, but it's not required.
The urn attribute defines the more general Universal Resource Name (URN) for a referenced document. The value of this attribute is a string enclosed in quotes. The actual syntax and semantics of the URN have not yet been defined, making this attribute little more than a place keeper for future versions of HTML.
You make a hyperlink to another document with the <a> tag and its href attribute, which defines the URL of the target document. The contents of the <a> tag are presented to the user in some distinctive manner to indicate the link is available.
When creating a link to another document, you should consider adding the title, rel, and rev attributes to the <a> tag. They help document the link you are creating and allow the browser to further embellish the display anchor contents.
Creating a link within the same HTML document or to a specific fragment of another document is a two-step process. The first step is to make the target fragment; the second is to create the link to the fragment.
Use the <a> tag with its name attribute to identify a fragment. The value of the name attribute is used in hyperlinks that point to the fragment. Here's a sample fragment identifier:
<h3><a name="Section_7">Section 7</a></h3>
A hyperlink to the fragment is an <a> tag with the href attribute, in which the attribute's value--the target URL--ends with the fragment's name, preceded by the hash character (#). A reference to the previous example's fragment identifier, then, might look like:
See <a href="index.html#Section_7">Section 7</a> for further details.
By far, the most common use of fragment identifiers is in creating a table of contents for a lengthy document. Begin by dividing your document into several logical sections, using appropriate headers and consistent formatting. At the start of each section, add a fragment identifier for that section, typically as part of the section title as a header. Finally, make a list of links to those fragment identifiers at the beginning of your document.
Our sample document extolling the life and wonders of the mighty kumquat, for example, is quite long and involved, including many sections and subsections of interest. It is a document to be read and read again. To make it easy for kumquat lovers everywhere to quickly find their section of interest, we've included fragment identifiers for each major section, and placed an ordered list of links--a hotlinked table of contents, as it were--at the beginning of each of the Kumquat Lover's documents, a sample of which appears below along with sample fragment identifiers that appear in the same document. The ellipsis symbol (...) means there are intervening segments of content, of course.
... <h3>Table of Contents</h3> <ol> <li><a href="#soil_prep">Soil Preparation</a> <li><a href="#dig_hole">Digging The Hole</a> <li><a href="#planting">Planting the Tree</a> </ol> ... <h3><a name=soil_prep>Soil Preparation</a></h3> ... <h3><a name=dig_hole>Digging the Hole</a></h3> ... <h3><a name=planting>Planting the Tree</a></h3> ...
The kumquat lover can thereby click the desired link in the Table of Contents and jump directly to the section of interest, without lots of tedious scrolling.
Notice also that this example uses relative URLs--a good idea if you ever intend to move or rename the document without breaking all the hyperlinks.
![[Graphic: Figure 6-2]](figs/uhtml0602.gif)
