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
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
element; underlines are best left on links, and links alone. In most
browsers, an image that’s contained inside an
will display a border, unless this default is overridden using CSS; the
exception is Opera, which doesn’t apply a border in this
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
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.
a element is used here to link to a page that lists
cakes for sale:
<p>You can try our <a href="cakes.html">lovely range of cakes</a>.</p>
Use This For …
This element is
used to contain a—preferably short—link text phrase, or an image (with an
alt attribute) that defines the
destination of the link.
It causes no compatibility issues, and has excellent support across all tested browsers.