Website Creation: links 2

How do you know whether the anchor text you’ve provided is good enough? A good rule of thumb
that you can use to test it is that you should always be able to extract all the anchor text of all the links
on your page, and without any supporting context, the links should clearly imply their destination.
Avoid linking words that have nothing to do with where you’re linking to, such as “click here,” or just
“here.” These types of links aren’t helpful to anyone. So again, the more descriptive a link’s anchor
text is, the better.
The href attribute, URLs, and web page addresses
Without links, the Web wouldn’t be the Web, so it behooves you to pay a little more attention to the
href attribute and the values it can take.
For obvious reasons, the href attribute is always going to contain a hyperlink reference, which is really
just a fancy way of saying a web page address or, more formally, a URL. The acronym URL stands for
Uniform Resource Locator. For the purposes of this chapter, a URL is just a way to generalize the kinds
of resources that you can request through a web browser. A web page is one kind of resource, an
image is another, and a video is yet another. Most of the time, hyperlink references refer only to web
pages. All URLs, including those that specify web page addresses, can be written in three distinct ways.
Each of these ways is a valid value for the href attribute.
The most verbose form of a web page address is called a fully qualified URL. Fully qualified URLs are
so named because they are composed of all three pieces of a URL: the scheme (also called the protocol),
the domain name (also called the host name), and the path. In the example link to Wikipedia in
the previous section, the scheme was http:, the domain name was //wikipedia.org, and the path
was the trailing / (which means “the home page”).
Some parts of URLs are considered optional, which means that if they are omitted, they’re filled in
according to the current context. For instance, in fully qualified URLs, the scheme portion is optional
and is filled in with whatever scheme the current page uses. So if your web page, like most of the web
pages out there, uses the http: scheme and you link to Wikipedia, then http://wikipedia.org/ and
//wikipedia.org/ are identical. On the other hand, if your web page uses the https: scheme, then a
link to //wikipedia.org/ will end up linking to https://wikipedia.org/ instead.
Another way to specify a URL is called an absolute link. Absolute links require that only the path portion
of the address is to be placed in the href value but that the path begins with the website’s root,
or initial forward slash (/). These are called absolute links because they specify the web page’s full
path from the root of the website (typically the home page) to their current location.

The final method is called a relative link, and like absolute links, relative links also require that only the
path portion of the address be present. Unlike an absolute link, however, a relative link must not begin
with an initial forward slash. Relative links always use the context of the current location of your web
page to infer the complete URL, so they are by definition restricted to always link to pages hosted at
the same domain name. Relative links can be a little harder to grasp, so let’s look at a few examples.
A website’s structure is just like the files and folders on your computer, such as the structure shown in
Figure 4-2. If you’re currently viewing a file called overview.html and you wanted to link to
messages.html, you could simply place messages.html in the href value like this:
<a href="messages.html">Messages</a>

Figure 4-2. The file/folder hierarchy of a website is just like
the file/folder hierarchy on your computer. Similar pages
can be grouped together into folders, and linking can occur
between files and across folder levels.

If you wanted to link to john.html in the people folder, you would have to add the folder (also called
the directory) before the file, with a forward slash between the folder name and file name:
<a href="people/john.html">Messages</a>
Both of these are relative links that link to different pages on the same website, relative to their own
positions. Relative links are handy because they don’t need to be updated if the structure of some part
of your website changes. They need to be updated only if the file that they reference (or if they themselves)
moves.
What if you’re currently looking at john.html in the people folder and you want to link back to the
overview.html page above it? In this instance, you need to use a special symbol to indicate you want
to move up one folder level before looking for a particular file. That symbol is two periods, which just
means “the folder above me.” Like all folders, you then follow this symbol with a forward slash:
<a href="../overview.html">Messages</a>
This would tell the browser to go up one level in the website tree and then load the overview.html
page. This ../ sequence can be used multiple times if you need to go two or more levels up.
It’s almost always best to link to files on your own site with relative or absolute links as opposed to
fully qualified ones. This saves you from having to type your own domain name over and over again
(which makes your HTML files that much shorter), and it makes your site more portable in case your domain name changes in the future.