Creating the Page Templates - HTML5 Foundations - page 49

Links
Hyperlinks are arguably one of the most important HTML elements. They represent a connection between two docu-
ments on the web, or to another part of the same document. By linking to other content on the web, you are signaling
that you think the content may be of interest to someone who is reading your web page. The following sections ad-
dress the elements you can use to include links on your web pages.
In this topic, I use the terms hyperlink and link interchangeably. The term link is more commonly used.
The <a> Element
Hyperlinks in HTML are created using the <a> element. As well as linking to other pages on the web, you can also
use the <a> element to link to parts of the current page.
Let's first look at how you can use the <a> element to create links to other pages on the web. To link to other pages,
you must specify the path to the target page using the href attribute. This path can either be an absolute or relative
path (see Chapter 2 for more information about paths). Consider the following example:
<a href="http://google.com">Google</a>
Here we define a hyperlink to the Google home page, using an absolute path, and some anchor text. The anchor text
is what is actually displayed to the user. This enables you to swap the long and ugly URL for something a bit more
user friendly. A number of other attributes are also available on the <a> element; you look at these in the next sec-
tion.
As well as using the <a> element to link to other web pages, you can also use it to link to content within the same
web page. When a user clicks on the link, she will be taken to the relevant element on the page. Using links in this
way is useful when you have very large web pages; it allows users to quickly reach the section that they are interes-
ted in without having to scroll for a long time to get there. To create these links, you place an ID on the element that
you would like to link to and then place that same ID (prefixed with a # sign) in the href attribute of your link, as
in the following example.
<h1 id="hello">Hello World</h1>
<p>
...
</p>
<h2>Goodbye World</h2>
<p>
...
</p>
<a href="#hello">Back to Hello World</a>
In this example, you define a <h1> element with the ID hello ; this is the part of the page that you are linking to.
The <a> element you have defined is a link to the position of that element in the document. Note that the content of
the href attribute starts with a # and then the ID of the element you are linking to.