XHTML Links

Hyperlinks, commonly referred to as links, are references to resources on a file system. Links have three components: destination, label, and target. The destination specifies the type of resource represented by the link. Destinations can include images, sound files, movies, or other Web pages. The label is the part the user sees and clicks on to reach the destination. The target, which is often omitted or implicit, is where the destination will be displayed. For example, the target could be a named window or a new window.

Creating links

Syntax

To create a link, use the anchor element (a).

<p>For more information, search for it on <a href="http://www.google.com">Google</a>.</p>

In the example above, the href (hypertext reference) attribute specifies the destination – http://www.google.com. The label is the text between the begin- and end-anchor elements – Google.

Relative versus absolute paths

Relative URLs refer to resources relative to the current Web page that are within the Web page's domain. Absolute URLs refer to Web content outside of your Web page's domain. An absolute address must include an Internet protocol (e.g., HTTP, HTTPS, FTP). For example, the following link may not work properly because the destination, www.google.com, is outside the host domain, http://www.programmingisfun.net.

<p>This is possibly a bad way to link to <a href="www.google.com">Google</a>.</p>

To compare relative and absolute addresses, suppose you are creating a markup file named index.html. The file is stored in the languages directory within the www.programmingisfun.net domain. To link to another Web page within the languages directory, there are two alternatives:

<a href="fortran.html">FORTRAN</a>

<a href="http://www.programmingisfun.net/languages/fortran.html">FORTRAN</a>

The first method is preferred because of the shorter path length. Additionally, if the name of the directory changes from languages to langs, the relative link will continue to function; however, the absolute link will be broken. To access URLs in other directories, the .. (dot-dot) operator is useful for going up one level in the file system hierarchy. Suppose there is an examples directory on the same level as languages, and you want to link to something in that directory from languages/index.html.

<a href="../examples/fortran/arrays.html">FORTRAN arrays</a>

Tips for using links

Link labels should be short. In other words, don't use an entire sentence as a link label.
The label Click here should be avoided in favor of more descriptive text.
The anchor element can contain any kind of inline element (e.g., i, b) except another anchor element. Anchor elements cannot contain block-level elements (e.g., h1, p).

<a href="fortran.html">Click here</a> to learn about FORTRAN.

Learn about <a href="fortran.html">FORTRAN</a>.

Most programmers agree that the least fun language is <a href="lisp.html"><b>LISP</b></a>.

<a href="compiled.html"><h3>Compiled languages</h3></a>

<h3><a href="compiled.html">Compiled languages</a></h3>

Anchors

Anchors are jump points within an XHTML page that can be used as destinations for links. Clicking on a link typically takes the user to the top of the corresponding destination document. A link can instead jump to a specific section of a Web page by referencing an anchor in the destination. Anchors are particularly useful in long pages, helping to divide the page into sections to which the user can quickly navigate.

To create an anchor, use the name attribute of the anchor element. Any element can be made to serve as an anchor by specifying its id attribute:

<h3><a name="intro">Introduction</a></h3>

...

<h3 id="chap1">Chapter 1</h3>

To link to an anchor within the current page, use the pound-sign before the anchor name.

<h1>Programming is Fun</h1>

<h3>Table of Contents</h3>

<p><a href="#intro">Introduction</a><br />

<a href="#history">History of Computing</a><br />

...

<h3><a name="intro">Introduction</a></h3>

<p>Let's start with the abacus...</p>

You can also target anchors on other Web pages.

<a href="languages.html#compiled">Compiled languages</a>

<a href="languages.html#interpreted">Interpreted languages</a>

Targets

Targets allow you to specify the browser window where the link destinations are to be displayed. They are often used to open new browser windows when you do not want the content of the current window replaced by the link content. Targets are specified in links using the target attribute and should refer to a window name:

<a href="fortran.html" target="compiled">FORTRAN</a><br />

If the user clicks on a link targeted at the interpreted window and that window has not yet been created, a new browser window will appear displaying the link destination. If that window remains open, any other links targeted to the interpreted window will be displayed in that window.

If you want to specify a default target for all links on the page, use the base element.

<base target="interpreted" />

<a href="fortran.html" target="compiled">FORTRAN</a><br />

Individual links can still use the target attribute to override the default target. Here are some things to keep in mind about targets:

Target names are case-sensitive.
To open a link in an unnamed, new browser window, use a target name of _blank.
The W3C has removed the target attribute for strict XHTML. It suggests using JavaScript to handle targets.

Keyboard interaction

Keyboard shortcuts

Keyboard shortcuts allow users to select and activate links without using the mouse. To specify a shortcut key, use the accesskey attribute.

<a href="fortran.html" accesskey="o">FORTRAN</a><br />

In Microsoft Internet Explorer, using the keyboard shortcut only gives the link focus; the user must press Return to activate the link. For Microsoft Windows browsers, keyboard shortcuts must be modified with the Alt key. For example, Alt-A will follow the link to ajax.html in the markup example given above. For Apple browsers, keyboard shortcuts must be modified with the Control key.

NOTE: Make sure your keyboard shortcuts aren't already part of the browser. For example, you could have assigned an access key of ‘F’ to fortran.html; however, pressing Alt-F typically activates the File menu in Windows-based browsers.

Tab order

Most browsers allow users to navigate through the interactive elements (e.g., links, form elements) by using the Tab key. To define the order for interactive elements on the page, use the tabindex attribute of the anchor element.

<a href="fortran.html" taborder="3">FORTRAN</a><br />

The tab order for the links in the markup above is perl.html, ajax.html, then fortran.html. Tabbing to the link only gives the link focus; the user must press Return to activate the link. The value for taborder attribute should be between 0 (first) and 32767 (last). When the user is presented with the Web page, the first time the Tab key is pressed, the browser's URL textfield will be given focus. Any subsequent presses of the Tab key will give the element with taborder="0" focus, then taborder="1", and so on.

Images as links

To make an image act as a link, place the img element within the a element.

The default appearance is a blue border around the image. Specifying border="0" removes the border around the image. The W3C recommends using style sheets instead of the border attribute for the img element.

Image maps

An image map is an image divided into clickable regions. Suppose you have an image that is a map of the state of Tennessee, which includes county lines. The regions of the image that correspond to individual counties can be made into links, such that clicking on a county within the image would take you to another page with information about that county.

To create an image map, first determine the regions of the image that should be clickable, then define the region-to-destination mappings. The former step is accomplished by using an image editing program to obtain the (x,y) values for certain reference points in the image, such as GIMP for Linux or Microsoft Paint for Windows. The latter step is accomplished by using the map element, as described in the next section.

Client-side image maps

A client-side image map is defined within the XHTML markup and is interpreted by the browser (i.e., the client). To define a client-side image map, use the map and area elements. The map element contains multiple area elements. The area elements define the shape, coordinates, and destinations for each region. Remember that it might be useful to use an image editing program to obtain the (x,y) coordinates for the area elements.

The XHTML markup below defines the blue region as Area 13, the green region as Area 84, the red region as Forbidden Area, and the magenta region as Fun Area. (Note: The colors are part of the image itself – the image map does not impose any colors on the image.)

You can try out the actual image map here.

</map>

The alt attribute contains text the user will see as a tooltip within the browser as the mouse is hovered over a particular part of the image map. The shape attribute can be rect, circle, or poly for rectangular, circular, and polygonal regions respectively. The coords attribute is a comma-separated list of coordinates:

rect: The upper-left corner (x₁,y₁) and the lower-right corner (x₂,y₂).
circle: The center (x,y) and the radius (in pixels).
poly: The n individual coordinates x₁, y₁, x₂, y₂, …, x_n, y_n. The last coordinate must be the same as the first coordinate to close the polygon.

The href="nohref" is a means of defining a region but preventing it from linking to a destination. Unfortunately not all browsers recognize nohref as a keyword and instead interpret it as a file name. For example, Safari will display a "nohref not found" error message. You can try omitting the href specifier instead and that should also prevent the region from being selectable.

To associate an image with an image map, define the usemap attribute for the img element. The usemap attribute should reference the label specified by the name or id attribute of the appropriate map element. Different browsers use either the name or id attribute, so for portability your map elements should specify both the name and id attributes and assign them the same value. An image map defined in another XHTML page can be referenced using the name of that page concatenated with the pound-sign and the name of the map. This allows you to reuse the same image map without copying and pasting the map definition markup into several files.

Here are some things to keep in mind about client-side image maps:

If image map regions overlap, the browser uses the first defined area to determine the destination URL.
Keyboard shortcuts can be added to image map regions using the accesskey attribute of the area element.
The destinations do not need to be other Web pages: They could be links to anchors within the current page.

Server-side image maps

A server-side image map has the same effect as a client-side image map: It divides an image into clickable regions. The difference is that the mapping of regions to URLs exists in a file on the server (i.e., not part of the XHTML page as with client-side image maps). The other difference is that when the user clicks in a region of the image, the coordinates are sent to a special page on the server (i.e., a CGI application) to handle the image map.

In the following example, the file coords.map defines the regions of the image and the corresponding URLs. Consult the W3C Web site for more information about server-side image maps, as the details are beyond the scope of this document. Basically the format of the file is different than the format used for client-side image maps.

</a>

Client-side image maps are preferred over server-side image maps because they

are simpler to create (i.e., using the map and area elements rather than a special file format),
do not require CGI access or any other privileges granted by the Web server administrator, and
are faster because the work is done by the client's browser instead of the server.

However, server-side image maps must be used when the region coordinates need to be determined dynamically when the page is loaded rather than statically when the page is created. For example, an airline search program that generates potential travel routes between two cities would need to dynamically construct an image with different cities depending on the departure and arrival cities.