Description

At one character long, this is one of the smallest elements, but a is the lifeblood of the World Wide Web. It’s this element that links the billions of web pages together, allowing you to surf from page to page almost endlessly. To say that it’s the most important element of all those presented here would not be an exaggeration.

The a element is usually referred to as a link (not to be confused with the link element, which has a different purpose), or even a hyperlink—although people who refer to hyperlinks probably also talk about “the information superhighway” and think that the film Tron is cutting-edge! This element’s purpose is simple: it wraps around text, or an image, or both, and refers to another web page, or another section on the same web page; the user can click on the contained text or image, or tab to it and activate with the keyboard’s Enter key. The enclosed text will be underlined by default in all browsers, which signifies that it’s a clickable link. It’s for this reason that you shouldn’t use the u element; underlines are best left on links, and links alone. In most browsers, an image that’s contained inside an a element will display a border, unless this default is overridden using CSS; the exception is Opera, which doesn’t apply a border in this scenario.

The a element has a number of special attributes, which are detailed below, but the one that you’ll use most of the time—if it’s not the only one you’ll use—is the href attribute. This attribute indicates the link’s destination, be that another web page, a section of the same web page, or some other type of document, such as an image, a spreadsheet, or a PDF document.

If no additional styles are applied using CSS, links will appear as follows:

• An unvisited link appears in blue underlined text.
• A visited link displays in purple underlined text.
• An active link—the link state during the (usually) very brief moment between the link’s activation and the loading of the next page—appears in red underlined text.

These color codes are replicated in the border of any image that’s contained inside an a element (unless it’s disabled in CSS). The example code referenced above displays in all browsers, as shown in the image Figure 1.

Figure 1. An example link

Use This For …

This element is used to contain a—preferably short—link text phrase, or an image (with an appropriate alt attribute) that defines the destination of the link.

Compatibility

It causes no compatibility issues, and has excellent support across all tested browsers.