HTML..XHTML.The.Definitive.Guide..5th.Ed.1002002 [Electronic resources] نسخه متنی

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.

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=">Kumquat Online</a></cite>, 
To subscribe to 
<a href="><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=">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=">
<img src="/image/library/english/10232_new.gif" align=center>
New pruning tips!</a>
<p>
<li><a href=">
<img src="/image/library/english/10232_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="#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/recipesl#quat5"
onMouseOver="status='A yummy recipe for kumquat soup.'; return true;">
<img src="/image/library/english/10232_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=" 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="/image/library/english/10232_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=" 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="162#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.