HTML The Definitive Guide (71 page)

Chapter 7

Links and Webs

7.3 Creating Hyperlinks

Use the HTML tag to create links to other documents and to name anchors for fragment indentifiers within documents.

7.3.1 The Tag

HTML authors use the 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 of the link; the value of the href attribute, a URL, is the target.[
6
]

[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 tag is with the name attribute to mark a hyperlink target, or fragment identifier, in an HTML document.

Function:

Define anchors within a text flow

Attributes:

ACCESSKEY ONKEYPRESS

CHARSET ONKEYUP

CLASS ONMOUSEDOWN

COORDS ONMOUSEMOVE

DIR ONMOUSEOUT

HREF ONMOUSEOVER

HREFLANG ONMOUSEUP

ID REL

LANG REV

NAME SHAPE

ONBLUR STYLE

ONCLICK TABINDEX

ONDBLCLICK TARGET

ONFOCUS TITLE

ONKEYDOWN TYPE

End tag:

; always present

Contains:

a_content

Used in:

text

It is possible to use both the name and href attributes within a single 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 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.

7.3.1.1 Allowed content

Between the 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 tags.

While the allowed content may seem restricted (the inability to place style markup within an tag is a bit onerous, for instance), most browsers let you put just about anything within an tag that makes sense. To be compliant with the HTML standard, place the 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

Kumquat Online, To subscribe to

Kumquat Online, only the first example is technically correct.

7.3.1.2 The href attribute

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 or a JavaScript code fragment. If the user selects the contents of the tag, the browser will retrieve and display the document indicated by the URL specified by the href attribute or execute the list of JavaScript expressions, methods, and functions.
[Referencing Documents: The URL, 7.2]

A simple tag that references another document might be: The growing season for kumquats in the Northeast.

which appears in the Netscape display as shown in
Figure 7.1
.

Figure 7.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 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:

• New pruning tips!
  

  
  

• Kumquats throughout history
  

Most graphical browsers like Netscape and Internet Explorer place a special border around images that
are part of an anchor, as shown in Figure 7.2
. Remove that hyperlink border with the border=0

attribute and value within the tag reference for the image.
[The border attribute, 5.2.6.8]

Figure 7.2: Internet Explorer puts a special border around an image that is inside an
anchor

7.3.1.3 The name and id attributes

Use the name and id attributes with the tag to create a fragment identifier within an HTML

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 in HTML was to use the name attribute with the tag. With the advent of the id attribute in HTML 4.0, and its ability to be used with almost any tag, any HTML element can be a fragment identifier. The 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 to be both a hyperlink and a fragment indentifier.

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 tag or the id attribute within the 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: Pruning Your Kumquat Tree or even more economical, when the HTML 4.0 standard id attribute becomes commonly supported: Pruning Your Kumquat Tree Notice that we set the anchor in a section header of a presumably 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: jumps directly to the section of the document we named in either of the previous examples.

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

Technically, you do not have to put any document content within the 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 and tags. For this reason, it's probably a good idea to have at least one displayable element in the body of any tag.

7.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 HTML tags and execute one or more JavaScript commands and functions when the event occurs.

With the anchor () 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. [JavaScript Event Handlers, 13.3.3]