HTML The Definitive Guide (72 page)

Read HTML The Definitive Guide Online

Authors: Chuck Musciano Bill Kennedy

BOOK: HTML The Definitive Guide
13.81Mb size Format: txt, pdf, ePub

For example, 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 7.3).

Normally, the browser displays the frequently cryptic destination URL there whenever the user passes the mouse pointer over an tag's contents:

onMouseOver="window.status='A recipe for kumquat soup.';return true">

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 13
for more about JavaScript.

Figure 7.3: Use JavaScript to display a message in the browser's status box
7.3.1.5 The rel and rev attributes

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, and the rev attribute specifies the relationship from the target to the source. Both attributes can be placed in a single 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:

tag creates the link and imbues it with the relationship attributes.
[, 7.7]

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

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

7.3.1.6 The style and class attributes
Use the style and class attributes for the 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
tag. [Inline

Styles: The style Attribute, 9.1.1]
[Style Classes, 9.2.4]

7.3.1.7 The lang and dir attributes

Like almost all other HTML tags, the tag accepts the lang and dir attributes, denoting the language used for the content within the tag, and the direction in which that langauge is rendered.

[The dir attribute, 3.5.1.1] [The lang attribute, 3.5.1.2]

7.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, 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
Section 12.7, "Named Frame or

Window Targets" in
Chapter 12.

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

title="A photograph of the Noble Fruit"> Ideally, the value specified should match the title of the referenced document, but it's not required.

7.3.1.10 The charset, hreflang, and type attributes
According to the HTML 4.0 standard, the charset attribute lets you specify 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.
[The lang attribute, 3.5.1.2]

The type attribute specifies the content type of the resource referenced by the 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:

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

7.3.1.11 The coords and shape attributes
These are two more attributes defined in the HTML standard for the
tag that are not supported by the current, popular browsers. Like the attributes of the same names for tag, the coords and shape attributes define a region of influence for the tag. These attributes should only be used with the tag when that tag is part of the content of a tag, as described later in this chapter.

[The Tag, 7.5.3]
[The coords attribute, 7.5.4.2]
[The shape attribute, 7.5.4.7]

7.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 Return or 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 zero. 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 tag; if so, the browser may choose to display the character differently to indicate that it is a hot-key. This attribute is currently not supported by any of the popular browsers.

See an expanded description for both these attributes in
Chapter 10.

7.3.2 Linking to Other Documents

You make a hyperlink to another document with the tag and its href attribute, which defines the URL of the target document. The contents of the tag are presented to the user in some distinctive manner 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 tag. They help document the link you are creating and allow the browser to further embellish the display anchor contents.

7.3.3 Linking Within a Document

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 tag with its name attribute to identify a fragment. Or label the segment using the id attribute in a defining tag, such as with a header,

, or

tag. The value of the name or id attribute is used in hyperlinks that point to the fragment. Here's a sample fragment identifier: Section 7 Alternatively, when the HTML 4.0 standard becomes more completely implemented by the popular

browsers, you will be able to use the id attribute and embed the hyperlink target directly in the header tag:

Section 7 A hyperlink to the fragment is an 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 Section 7 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.