Hyperlink Elements
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.
<a>
Type:
Container
Function:
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.
){kind=link}
Figure
3.13
The hyperlinks on Microsoft's home page are set up using the
<a> element.
TIP
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.
Syntax:
<!-- 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>
or
<!-- Setting up a named anchor --> <a name="anchor_name"> ... text to act as named anchor ... </a>
Attributes:
The <a> element can take a host of attributes, including
accesskey—An 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.
charset—Denotes what character encoding to use for the linked document.
href—Gives the URL of the Web resource to which the hyperlink should point.
hreflang—Denotes the language context of the linked resource.
name—Specifies the name of the anchor being set up.
rel—Describes the nature of the forward link (refer to Table 3.3 for possible values).
rev—Describes the nature of the reverse link (refer to Table 3.3 for possible values).
tabindex—Specifies the link's position in the document's tabbing order.
target—Tells the browser into which frame the linked document should be loaded.
type—Specifies the MIME type of the linked resource.
Examples:
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>