6.3 Creating Hyperlinks

Use the HTML/XHTML <a> tag to create links to other documents and to name anchors for fragment indentifiers within documents.

6.3.1 The <a> Tag

You will use the <a> tag most commonly with its href attribute to create a hypertext link, or hyperlink, to another place in the same document or to another document. In these cases, the current document is the source of the link; the value of the href attribute, a URL, is the target.^[7]

^[7] 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 a document. This method, although part of the HTML 4 and XHTML standards, is slowly succumbing to the id attribute, which lets you mark nearly any element, including paragraphs, divisions, forms, and so on, as a hyperlink target.

<a> Function Defines anchors within a text flow Attributes accesskey, charset, class, coords, dir, href, hreflang, id, lang, name, onBlur, onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, rel, rev, shape, style, tabindex, target, title, type End tag </a>; never omitted Contains a_content Used in text

The standards let you 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 source will be easier to understand and modify and will work better across a wider range of browsers.

6.3.1.1 Allowed content

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 they are hyperlinks to other documents. 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 4 and XHTML standards, 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, and the second is most certainly incorrect for XHTML.

6.3.1.2 The href attribute

Use the href attribute to specify the URL of the target of a hyperlink. Its value is any valid document URL, absolute or relative, including a fragment identifier or a JavaScript code fragment. If the user selects the contents of the <a> tag, the browser will attempt to retrieve and display the document indicated by the URL specified by the href attribute or execute the list of JavaScript expressions, methods, and functions. [Section 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 shown in Figure 6-1.

Figure 6-1. Hyperlink to another HTML document

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 usually have the option to set their own text color for 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:

<ul>
  <li><a href="pruning_tips.html">
        <img src="pics/new.gif" align=center>
         New pruning tips!</a>
  <p>
  <li><a href="xhistory.html">
        <img src="pics/new2.gif" align=center>
         Kumquats throughout history</a>
</ul>

Most graphical browsers, like Netscape and Internet Explorer, place a special border around images that are part of an anchor, as shown in Figure 6-2. Remove that hyperlink border with the border=0 attribute and value within the <img> tag for the image. [Section 5.2.6.8]

Figure 6-2. Internet Explorer puts a special border around an image that is inside an anchor

6.3.1.3 The name and id attributes

Use the name and id attributes with the <a> tag to create a fragment identifier within a document. Once created, the fragment identifier becomes a potential target of a link.

Prior to HTML 4.0, the only way to create a fragment identifier was to use the name attribute with the <a> tag. With the advent of the id attribute in HTML 4.0, and its ability to be used with almost any tag, any HTML or XHTML element can be a fragment identifier. The <a> tag retains the name attribute for historic purposes and honors the id attribute as well. These attributes can be used interchangeably, with id being the more "modern" version of the name attribute. Both name and id can be specified in conjunction with the href attribute, allowing a single <a> to be both a hyperlink and a fragment identifier.

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 or the id attribute within the <a> or other tags 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 id or name attribute is any character string, enclosed in quotation marks. The string must be a unique label, not reused in any other name or id attribute in the same document, although it can be reused in different documents.

Here are some name and id examples:

<h2><a name="Pruning">Pruning Your Kumquat Tree</a></h2>
<h2 id="Pruning">Pruning Your Kumquat Tree</h2>

Notice that we set the anchor in a section header of a presumably large document. It's a practice we encourage you to 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 in the previous examples.

The contents of the anchor <a> tag with the name or id attribute are not displayed in any special way.

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, though, 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.

6.3.1.4 The event attributes

There are a number of event handlers built into the modern browsers. These handlers watch for certain conditions and user actions, such as a click of the mouse or when an image finishes loading into the browser window. With client-side JavaScript, you may include selected event handlers as attributes of certain tags and execute one or more JavaScript commands and functions when the event occurs.

With the anchor (<a>) tag, you may associate JavaScript code with a number of mouse- and keyboard-related events. The value of the event handler is — enclosed in quotation marks — one or a sequence of semicolon-separated JavaScript expressions, methods, and function references that the browser executes when the event occurs. [Section 12.3.3]

A popular, albeit simple, use of the onMouseOver event with a hyperlink is to print an expanded description of the tag's destination in the JavaScript-aware browser's status box (Figure 6-3). Normally, the browser displays the frequently cryptic destination URL there whenever the user passes the mouse pointer over an <a> tag's contents:

<a href="http://www.ora.com/kumquats/homecooking/recipes.html#quat5"
onMouseOver="status='A yummy recipe for kumquat soup.'; return true;">
<img src="pics/bowl.gif" border=0>
</a>

Figure 6-3. Use JavaScript to display a message in the browser's status box

We argue that the contents of the tag itself should explain the link, but there are times when window space is tight and an expanded explanation is helpful, such as when the link is in a table of contents.

See Chapter 12 for more about JavaScript.

6.3.1.5 The rel and rev attributes

The optional rel and rev attributes for the <a> tag express a formal relationship and direction between source and target documents. The rel attribute specifies the relationship from the source document to the target, and 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 or XHTML standards. 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>]

Commonly used document relationships include:

next

Links to the next document in a collection

prev

Links to the previous document in a collection

head

Links to the top-level document in a collection

toc

Links to a collection's table of contents

parent

Links to the document above the source

child

Links to a document below the source

index

Links to the index for this document

glossary

Links to the glossary for this document

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 that you take the time to insert them whenever possible.

6.3.1.6 The style and class attributes

Use the style and class attributes for the <a> tag to control the display style for the content enclosed by the tag and to format the content according to a predefined class of the <a> tag. [Section 8.1.1] [Section 8.3]

6.3.1.7 The lang and dir attributes

Like almost all other tags, the <a> tag accepts the lang and dir attributes, denoting the language used for the content within the <a> tag and the direction in which that language is rendered. [Section 3.6.1.1] [Section 3.6.1.2]

6.3.1.8 The target attribute

The target attribute lets you specify where to display the contents of a selected hyperlink. Commonly used in conjunction with frames or multiple browser windows, the value of this attribute is the name of the frame or window in which the referenced document should be loaded. If the named frame or window exists, the document is loaded in that frame or window. If not, a new window is created and given the specified name, and the document is loaded in that new window. For more information, including a list of special target names, see Section 11.7.

6.3.1.9 The title attribute

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 quotation marks. 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 bookmarks or favorites.

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.

6.3.1.10 The charset, hreflang, and type attributes

According to the HTML 4 and XHTML standards, the charset attribute specifies the character encoding used in the document that is the destination of the link. The value of this attribute must be the name of a standard character set: "euc-jp," for example. The default value is "ISO-8859-1".

The hreflang attribute may be specified only when the href attribute is used. Like the lang attribute, its value is an ISO standard two-character language code. Unlike the lang attribute, the hreflang attribute does not address the language used by the contents of the tag. Instead, it specifies the language used in the document referenced by the href attribute. [Section 3.6.1.2]

The type attribute specifies the content type of the resource referenced by the <a> tag. Its value is any MIME encoding type. For example, you might inform the browser that you are linking to a plain ASCII document with:

<a href="readme.txt" type="text/plain">

The browser might use this information when displaying the referenced document, or might even present the link differently based upon the content type.

6.3.1.11 The coords and shape attributes

These are two more attributes defined in the HTML and XHTML standards for the <a> tag that are not supported by the currently popular browsers. Like the attributes of the same names for the <area> tag, the coords and shape attributes define a region of influence for the <a> tag. These attributes should be used with the <a> tag only when that tag is part of the content of a <map> tag, as described later in this chapter. [Section 6.5.3] [Section 6.5.4.2] [Section 6.5.4.7]

6.3.1.12 The accesskey and tabindex attributes

Traditionally, users of graphical browsers select and execute a hyperlink by pointing and clicking the mouse device on the region of the browser display defined by the anchor. What is less well known is that you may choose a hyperlink, among other objects in the browser window, by pressing the Tab key and then activate that link by pressing the Enter key. With the tabindex attribute, you may reorder the sequence in which the browser steps through to each object when the user presses the Tab key. The value of this attribute is an integer greater than 0. The browser starts with the object whose tab index is 1 and moves through the other objects in increasing order.

With the accesskey attribute, you may select an alternative "hot-key" that, when pressed, activates the specific link. The value of this attribute is a single character that is pressed in conjunction with an "alt" or "meta" key, depending on the browser and computing platform. Ideally, this character should appear in the content of the <a> tag; if so, the browser may choose to display the character differently to indicate that it is a hot-key.

See an expanded description for both of these attributes in Chapter 9.

6.3.2 Linking to Other Documents

Say 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 in order to indicate that 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 embellish the display anchor contents.

6.3.3 Linking Within a Document

Creating a link within the same 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. Here's a sample fragment identifier:

<h3><a name="Section_7">Section 7</a></h3>

Alternatively, use the id attribute and embed the hyperlink target directly in a defining tag, such as a header:^[8]

^[8] We prefer the id way, although not all browsers support it, yet.

<h3 id="Section_7">Section 7</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 pound sign (#). 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. 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. In order to make it easy for kumquat lovers everywhere to find their section of interest quickly, 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 that 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 id=soil_prep>Soil Preparation</h3>
...
<h3 id=dig_hole>Digging the Hole</h3>
...
<h3 id=planting>Planting the Tree</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.