Anchor Attributes
| < Day Day Up > |
The a element has many possible attributes besides href , as shown in Table 4-5. The more important attributes are discussed in the sections to follow, along with the concepts of binding scripts to anchors, using anchors with images, and creating a special type of image link called an image map . Refer to the element reference (Appendix A) to see a complete listing of all possible attributes for the a element.
| Attribute Name | Possible Value | Description |
|---|---|---|
| href | URL | Sets the URL of the destination object for the anchor. |
| name | Text | Names the anchor so that it can be a target of another anchor or script. Traditional HTML superceded by id. |
| id | Text | Identifies the anchor for target by another anchor, style sheet access, and scripting exposure. HTML 4 or XHTML attribute. |
| target | A frame name | Defines the frame or window destination of the link. |
| title | Text | Sets advisory text. |
| accesskey | A character | Sets the key for keyboard access to the link. |
| tabindex | A numeric value | Sets the order in the tabbing index for using the Tab key to move through links in a page. |
| rel | Text | Defines the relationship of the object being linked to. |
| rev | Text | Defines the relationship of the current object to the object being linked to. In short, rev defines the reverse relationship. |
Using name and id to Set Link Destinations
An <a> tag usually defines a hyperlink's source location: where the link goes, and what you click to go there. One possible destination for a hyperlink is a named location inside an HTML/XHTML document. The <a> tag can also be used to define these locations in a special usage known as setting a fragment identifier , although the term marker might make more sense. To set a marker, set the name to a symbolic name for the marker location. The defined name must be unique within the document. Wherever the marker is placed within an HTML document becomes a named candidate destination for hyperlinks . For example, the HTML markup <a name="marker"> This is a marker </a> sets the text "This is a marker" to be associated with the fragment identifier #marker .
| Note | Unlike hyperlink anchors, a marker location is not underlined or in any way visually distinguished. |
In practice, when an < a> tag is used solely as a marker, it often doesn't enclose any text, although this doesn't suggest that the close tag should be omitted, as it often is. Setting a marker such as <a name="top"> is accepted by most browsers, but <a name="top"></a> is the valid form that should be used.
An < a> tag can serve as both a destination and a link at the same time. For example,
<a name="yahoolink" href="http://www.yahoo.com/"> Yahoo! </a>
creates a link to a site and names the anchor so that it can be referenced by other links. The dual use of the a element might cause some confusion, but it is valid.
As discussed in Chapter 3, under the current version of HTML, the id attribute also is available for nearly every element. It also can be used to set a marker. The preceding example could have been written <a id="yahoolink" href="http://www.yahoo.com"> Yahoo! </a> , thus exposing the anchor for targeted linking, style sheets, and dynamic manipulation via a scripting language. For backward compatibility, the name attribute is often used because many older browsers do not support id fully. Thus, we might specify <a id="yahoolink" name="yahoolink" href= "http://www.yahoo.com"> Yahoo! </a> to cover many possibilities. Interestingly, such mixed markup will validate even in strict HTML/XHTML.
The need for named anchors isn't always obvious. Their main purpose is to name a location within a document to jump to; for example, the common "back to top" links found at the bottom of long pages. Such link usage can be accomplished by using <a name="top" id="top"></a> to define named locations and then referencing them with links containing fragment identifiers such as <a href="#top"> Top of the document </a>. Be careful to always use the # symbol with marker names. Otherwise, the user agent probably will interpret the link as referencing a file rather than a marker.
In the more general case, a marked location in any HTML document can be referenced by placing # and a marker name after its normal URL. For example,
<a href="http://www.democompany.com/products/robots.html#specs"> Robot Specs </a>
will link to a named marker called "specs" in the robots.htm file. A complete example of linking within a file and to markers outside the file is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Name Attribute Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <p><a id="top" name="top"></a> Go to the <a href="#bottom"> bottom </a> of this document. <br /> Link right to a <a href="../examples/chapter4/testfile.html#marker1"> marker </a> in another document. </p> <p> To make this work we need to simulate the document being very long by using many breaks. <br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /> <strong id="middle"> the middle </strong> <br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /> </p> <hr /> <p><a id="bottom" name="bottom" href="#top"> return to top </a> <a href="#middle">go to middle</a></p> </body> </html>
| Note | Named values must be unique, whether they are set using the name attribute or the id attribute. |
title Attributes for Anchors
Often, the title attribute will not seem terribly helpful to a user because it provides only basic advisory information about the use of a particular element. In the case of anchors, however, title is very useful because it can be used to indicate some information about the link's destination. The following code fragment provides some helpful information for the link:
<a href="staff/index.html" title="Resumes and information about our staff"> Staff </a>
A rendering of the previous example might look like this:
| Note | Although the title attribute is usable in nearly every HTML element under Internet Explorer, using it makes sense mainly for links, images, binary objects, and forms. |
The title attribute serves another purpose: It provides the title information for a bookmark when a link is bookmarked before the destination page is visited. Although this might not be intuitive, with many browsers, you can right-click a link to access a menu that enables you to bookmark the link before it is visited. Then, when the page is visited, the information enclosed within the <title> tag of the destination page is used in the bookmark instead of the information in the title attribute of the anchor that loaded the page. (Note that the title attribute and the title element are two entirely different things.)
Accelerator Keys
The HTML 4 specification added the accesskey to the a element, as well as to various form elements, as discussed in Chapter 12. With this attribute, you can set a key to invoke an anchor without requiring a pointing device to select the link. The link is activated with the combination of the accelerator key, usually ALT, and the key specified by the attribute. So,
<a href="http://www.yahoo.com/" accesskey="Y"> Yahoo! </a>
makes a link to Yahoo!, which can be activated by pressing ALT+Y. Internet Explore 4 and greater and Netscape 6 and greater support the accesskey attribute on links.
Although adding keyboard access to a Web page seemingly would be a dramatic usability improvement, HTML authors are cautioned to be aware of access key bindings in the browsing environment, as detailed in Table 4-6.
| Key | Description |
|---|---|
| F | File menu |
| E | Edit menu |
| V | View menu |
| N | Navigation menu (Opera 6) |
| G | Go menu (Netscape/Mozilla), Messaging menu (Opera 6) |
| B | Bookmarks menu (Netscape/Mozilla only) |
| A | Favorites menu (Internet Explorer only) |
| T | Tools or Tasks menu |
| M | E-mail menu (Opera 6) |
| S | Search menu (Netscape 6), News menu (Opera 6) |
| W | Window menu (Netscape 7/Mozilla) |
| A | Favorites menu (Internet Explorer only) |
| H | Help menu |
Another consideration with accelerator keys is how they should display in the page. In most software, underlining indicates the letter of the accelerator key. Links generally are underlined in browsers, so this approach isn't feasible . Style sheets can be used to change link direction, so underlining the first letter is possible, but then the user might be disoriented, expecting links to be fully underlined. Another approach to indicating the accelerator keys might be to set the access key letter of a text link in bold or a slightly larger size .
tabindex Attribute
The tabindex attribute of the a element defines the order in which links will be tabbed through in a browser that supports keyboard navigation. The value of tabindex usually is a positive number. Browsers tab through links in order of increasing tabindex values, but generally skip over those with negative values. So, <a href="about.html" tabindex="1"> sets this anchor to be the first thing tabbed to by a browser. If the tabindex attribute is undefined, the browser tends to tab through links from the top to the bottom of the page.
target Attribute
The target attribute is used in conjunction with frames , which are discussed in Chapter 8. To target a link so that the result loads in a particular frame or window, the target attribute is added to an < a> tag. Generally, a frame has a name, so setting the target equal to the frame name results in the link loading in the frame named in the attribute. For example, when selected, a link such as
<a href="http://www.yahoo.com/" target="display_frame"> Yahoo </a>
loads the object referenced by the URL into the frame named "display_frame" . If the target attribute is left out, the current window or frame the document is in is used. Aside from author-named frames, the following are several reserved names for frames that, when used with the target attribute, have special meaning: _blank , _self , _parent , and _top . For more information about frames, as well as instructions on how to use the a element with frames and the various reserved frame names, refer to the element reference (Appendix A) and Chapter 8.
Anchors and Link Relationships
The a element has the following two attributes whose meanings often are misunderstood. These attributes are not widely supported by browsers:
-
rel This attribute is used to describe the relationship between the document and the destination document referenced by the anchor's href attribute. For example, if the destination of the link specifies the glossary associated with a document, the anchor might read:
<a href="words.html" rel="glossary">Glossary</a>
-
rev This attribute defines the reverse relationship of what rel defines; in this case, what the relationship is from the destination document's perspective. An example of its use is a linear set of documents in which the rel attribute is set to " next " and the rev attribute is set to "prev" , as shown in the following code fragment:
<a href="page2.html" rel="next" rev="prev">Page 2</a>
Although the rel and rev attributes might seem very useful, few, if any, browsers support them. Currently, the only major use of these attributes is to document the relationship of links with the <a> tags themselves . The link element (discussed later in this chapter), which has semantic-link purposes similar to the rel and rev attributes, actually is supported to a limited degree in modern browsers. A list of many of the proposed values for the rel and rev attributes can be found in this chapter's upcoming section about link relationships.
Scripting and Anchors
Adding logic to anchors is possible through the use of client-side scripting languages such as JavaScript. Under HTML 4 and XHTML 1, core event attributes have been added to the a element and include onclick , onmouseover , onmouseout , and other attributes, which can be bound to scripting events. The events named correspond to an anchor being clicked ( onclick ), a pointer being positioned on a link ( onmouseover ), and a pointer leaving a link ( onmouseout ). One obvious use of such events is to animate links so that when a mouse passes over the link, the text changes color , and when the link is clicked, the system issues a click sound. Generically, this is the idea of a rollover button . Aside from the basic events that might be useful to create rollover links or trigger programming logic, event models from Microsoft and Netscape can include a variety of other events such as pressing the assigned Help key ( onhelp ) on the keyboard (generally F1), or other keys on the keyboard being pressed or released. HTML authors interested in scripting anchor activities should consult Chapter 14. Combined with images, anchor-oriented scripting additions can be used to create very persuasive Web pages.
| Tip | If simple rollover effects are desired, it is often more appropriate to rely on the pseudo selector a:hover than to utilize JavaScript. |
| < Day Day Up > |
EAN: 2147483647
Pages: 252