Links

Without hyperlinks, the Web wouldn’t be “the Web”. This section explains how to create links to other websites (external links) and links within your own website (internal links).

The a Element

The anchor element, a, creates links. Here’s an example:

<p>
A link to <a href="http://www.google.com/">Google's
home page</a>.
</p>
<p>
A link to
<a href="http://www.google.com/help/basics.html">a
page within Google</a>.
</p>

The syntax is straightforward: the href attribute indicates where the link should go, and the text between the <a> and </a> tags becomes the highlighted link text.

Anchor Titles

The optional title attribute allows you to provide a little extra information about the link. Some older browsers ignore this attribute, but most modern browsers produce a little floating “tooltip” if you hover your mouse over the link.

Can physics be
<a href="http://www.dctech.com/physics/humor.php"
title="The most hilarious collection of physics
humor anywhere!">funny</a>?
Is that a rhetorical question?

You can use the title attribute to indicate where the link is going or provide some other useful information. It’s nifty, but it doesn’t hurt to leave it out, either.

Components of the URL

To construct links to other websites, we need to understand the structure of the URL. Let’s take a closer look at the URL “http://www.google.com/help/basics.html”:

• The protocol (“http://”): Specifies that we would like to use the HTTP (HyperText Transport) protocol. This is the standard protocol for retrieving web pages, although there are others, such as FTP (File Transfer Protocol) and HTTPS (Secure HyperText Transport Protocol). Most of the time, though, you’ll be using “http://” to retrieve pages from external sites.

  You may specify the protocol in upper case, lower case, or anything in between, but most people use all lower case.

• The website (“www.google.com”): This specifies that we would like to access a page from google.com. More technically, it means:

  1. Go to the top-level domain “com” (a collection of many millions of websites).

  2. Within “com”, find the the domain name “google”.

  3. Within “google”, find the the sub-domain named “www”.

  Finding the website is similar to finding a mailing address. The address “1600 Pennsylvania Avenue NW, Washington, DC 20500” means: go to the zip code “20500”; within “20500”, find the city “Washington D.C.”; within “Washington, DC”, find the building “1600 Pennsylvania Avenue NW”.

  As with the protocol above, you may use any case you like for specifying the website, although most people use all lower case.

• The file path (“/help/basics.html”): This specifies that we would like to access the file basics.html, which is inside the directory help/.

  Unlike the other components, the filepath can be case-sensitive. Depending on the website you’re visiting, the file Basics.html might be different from the file basics.html.

Wait, Which File Was That Again?

This is a little odd — in our first example, “http://www.google.com/”, we didn’t specify a file or a directory. So what did we ask for, exactly?

First, it turns out the directory is specified. The single forward slash (“/”) represents the “root” or “top-level” directory of the website. We’re asking Google to give us a file from the top directory of its website.

Okay, but which file are we asking for? We didn’t specify the name of the file explicitly, we just asked for a directory. This means means we’re asking Google, “Give us the default file for that directory, if you have one.” As it turns out, Google is going to give us a file named “index.html”, but the exact name could be anything. It’s up to Google.

Internal links

Internal links are similar to external links except that you can leave off the protocol and website name. You only need to specify the file path.

File paths for internal links can be absolute or relative. Absolute links always begin with a forward slash. They specify a path that starts at the root directory of your web server. Relative links never begin with a forward slash. They specify a path that is relative to the page that the link is on.

Examples of absolute links:

• href="/": Go to the web root directory and get the default file. (The home page of goer.org.)

• href="/HTML/: Go to the web root directory, then the HTML directory, and get the default file. (The first page of this tutorial.)

• href="/HTML/basic/links/index.html": Go to the web root directory, then the HTML directory, then the basic directory, then the links directory, and get the file index.html (This page.)

Examples of relative links (relative to this page, http://www.goer.org/HTML/basic/links/index.html):

• href="index.html": Get the index.html file that is in the current directory. (This page.)

• href="../": Go up one directory from the current directory and get the default file. (The first page of Chapter 2.)

• href="../../introduction/": Go up two directories from the current directory, enter the introduction directory, and get the default file. (The first page of Chapter 1.)

As the examples demonstrate, URLs can vary in complexity while still pointing to the same location.

For pages that are “near” the current page, relative links are often simpler. Relative links also work better if you are working with files on your desktop, as opposed to a real websever.

Because absolute links are the same no matter where you are on the website, they’re good for standard navigation links, header and footer links. However, absolute links don’t work as well if you are just messing around with files on your desktop. On a webserver, an absolute link such as /HTML/index.html starts with the webserver’s root directory. But on your local desktop, there is no “webserver root directory”, and so your computer attempts to follow the filepath /HTML/index.html from the root directory of your hard drive. In general, this will fail.

Linking Within Pages

We can link to web pages in external websites and internal websites. What about linking to a particular location in a page?

All elements provide this capability through the id attribute. Once you’ve assigned an id to the element, you can link directly to the location on the page where the element appears:

<h2 id="fruitbat_migratory">
Migratory Patterns of the Fruit Bat
</h2>
...
...
...
<p>
<a href="#fruitbat_migratory">link to 'Migratory Patterns of the Fruit Bat'</a>.
</p>
...

The id’s value is fruitbat_migratory. Further down the page, we have a link to this ID, specified by href="#fruitbat_migratory".

You can combine named anchors with longer URLs: for example, http://www.goer.org/HTML/basic/links/#parts.

The pound sign in the URL makes the link point to the named anchor. If we had accidentally written href="parts", that would have been a relative link to the directory named “parts”.