The capability of linking Web resources is what makes the Web so fascinating. By following links, you can be looking up job opportunities one moment and then be reading up on the latest mixed drink recipes the next! Linking between documents is accomplished with the one simple element described in this section.
The <a> element can do one of two things, depending on which attributes you use. Used with the href attribute, the <a> element sets up a hyperlink from whatever content is found within the <a> element and the document at the URL specified by href (see Figure 3.13). When you use the <a> element with the name attribute, you set up a named anchor within a document that can be targeted by other hyperlinks. This helps make navigating a large document easier because you can set up anchors at the start of major sections and then place a set of links at the top of the document that points to the anchors at the beginning of each section.
The hyperlinks on Microsoft's home page are set up using the <a> element.
Hypertext links are typically colored and underlined. A linked graphic is rendered with a colored border. If you don't want a border around your linked image, be sure to specify style="border: 0 px" in the <img /> element you use to place the image.
<!-- Setting up a hyperlink --> <a href="url_of_linked_document" target="frame_name" rel="forward_link_type" rev="reverse_link_type" accesskey="key_letter" tabindex="tab_order_position"> ... hyperlinked element goes here ... </a>
<!-- Setting up a named anchor --> <a name="anchor_name"> ... text to act as named anchor ... </a>
The <a> element can take a host of attributes, including
accesskeyAn access key is a shortcut key a reader can use to activate the hyperlink. If you set the access key to the letter "C", for example, Windows users can press Alt+C on their keyboards to activate the link.
charsetDenotes what character encoding to use for the linked document.
hrefGives the URL of the Web resource to which the hyperlink should point.
hreflangDenotes the language context of the linked resource.
nameSpecifies the name of the anchor being set up.
relDescribes the nature of the forward link (refer to Table 3.3 for possible values).
revDescribes the nature of the reverse link (refer to Table 3.3 for possible values).
tabindexSpecifies the link's position in the document's tabbing order.
targetTells the browser into which frame the linked document should be loaded.
typeSpecifies the MIME type of the linked resource.
The following code sets up a simple hyperlink:
You can learn more about our <a href="prodserv.html target="main" accesskey="p"> products and services</a> as well.
To follow the link, a user can click the hypertext products and services or press Alt+P (on a Windows machine) or Cmd+P (on a Macintosh).
This code establishes a named anchor within a document:
... <a name="toc"> <h1>Table of Contents</h1> </a> ...
With the anchor set up, you can point a hyperlink to it by using code such as this:
<a href="index.html#toc">Back to the Table of Contents</a>