Linking the Web - HTML5 with CSS3 - page 185

itself a descendant of IBM's GML, includes no notion of linked documents. Therefore, linking is one of the
fundamental attributes of HTML and is a defining characteristic of hypertext.
The anchor element itself can link to any number of resources: other web pages, images, email addresses,
PDFs, and more. Essentially, anything on the Web can be accessed via a hyperlink. In the next section,
we'll walk you through a number of facets of the mighty anchor element.
a
The anchor element marks up hyperlinks, those clickable bits of text or images that exist in just about
every document on the Web. In previous versions of HTML, the anchor element's content model restricted
its content to phrasing (or “inline”) content. The HTML5 spec, though, expands the anchor's content model
to allow for the inclusion of flow (or “block”) content. We'll discuss the reasoning behind this decision later
in this chapter.
Thanks to the reworking of the anchor's content model, few restrictions exist on the element. In order to be
valid, an anchor element must have both a start and an end tag. Additionally, the anchor element cannot
be the child of another anchor element or a child of a button element.
The most basic implementation of an anchor element is shown in Listing 6-1.
Listing 6-1. A sample placeholder hyperlink
<a>A placeholder hyperlink</a>
As it lacks an href attribute, the example shown in Listing 6-1 is known as a placeholder hyperlink.
Hyperlinks of this type are functionally useless. However, this is perfectly valid HTML. Browsers will
typically render this code the same as plain text, as shown in Figure 6-1.
Figure 6-1. A sample placeholder hyperlink as rendered in the browser
Not terribly useful, right? Good thing, then, that we have…
The href attribute
The href attribute (“href” being short for “hypertext reference”) of the anchor element adds interactivity
and meaning to a placeholder hyperlink. Values for the href attribute are restricted to URLs, which we will
cover in great detail in the next section of this chapter. But first, Listing 6-2 illustrates a common anchor
element with an href attribute.
Listing 6-2. An anchor element with an href attribute
<a href="index.html">Back to homepage</a>
Most browsers will render this code as a run of blue, underlined text (see Figure 6-2). Of course, the
default styling of a hyperlink can easily be changed using CSS. When you move your mouse over the
hyperlink, your computer's cursor will change from its default arrow to a pointer. If you've spent any time at