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> Tag

The <a> tag (anchor tag) allows you to create links. Here's a simple 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.

Parts of the URL

Let's take a closer look at the URL "http://www.google.com/help/basics.html":

1. The protocol ("http://"): This specifies that we would like to use the HTTP (HyperText Transport) protocol. This is the standard protocol for retrieving web pages, although there are certainly others: FTP (File Transfer Protocol), HTTPS (Secure HyperText Transport Protocol), and so on. Most of the time, though, you'll be using "http://" to retrieve web 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.

2. The website ("www.google.com"): This specifies that we would like to access a page from Google.com. (Technically, it means that we would like to access a page from "the computer named 'www' in the domain of 'google' with the top-level-domain of 'com'.") As with the protocol, you may use any case you like for specifying the website, although most people stick with all lower case.

3. 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 parts of the URL, the filepath is case-sensitive: the file "Basics.html" is different from the file "basics.html".

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? Well, in the immortal words of famed web designer David Spade, "Mmmm... don't-know-don't-care." We didn't specify the name of the file, which 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, really. It's up to Google.)

Internal Links

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

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

Examples of absolute links:

• href="/": Go to the top-level directory; then get the default file. (The home page of this site.)
• href="/HTML/introduction/": Go to the top-level directory; then the HTML directory; then the introduction directory; then get the default file. (The first page of this tutorial's introduction.)
• href="/HTML/basic/links/": Go to the top-level directory; then the HTML directory; then the basic directory; then the links directory; then get the default file. (This page.)

Examples of relative links:

• href="index.html": Get the index.html file that is in the current directory. (This page.)
• href="../../../": Go up three directories from the current directory; then get the default file. (The home page of this site.)
• href="../../introduction/": Go up two directories from the current directory; then enter the introduction directory; then get the default file. (The first page of this tutorial's introduction.)

As you can see, URLs can vary considerably in length and complexity while still pointing to the same location. Sometimes it's a good idea to use relative links: for pages that are "near" the current page, relative links are often simpler. Sometimes it's a good idea to use absolute links: an absolute link will be the same no matter where you are on the website, so they're excellent for standard navigation links, header and footer links, and so on.

One caveat about absolute links: if you are just messing around with files on your desktop (as opposed to placing files on a proper web server), your absolute links will fail. A URL such as "/HTML/basic/links/" starts with the "webserver root directory" -- but if your files are not loaded onto a webserver, then there is no "webserver root directory", and your computer will try to match the URL to your local file system. On Windows machines, this might look like, "C:\WINDOWS\Desktop", on a Mac, "/Users/evan/Desktop/", and on another UNIX machine, "/home/goer". In all three cases, the link will fail.

Linking Within Pages

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

The anchor tag provides this capability through the name attribute. Once you've named an anchor tag, you can link directly to the spot where the anchor tag appears:

<a name="parts"></a>
<h4>Parts of the URL</h4>
...
...
...
<p>
  <a href="#parts">link to 'Parts of the URL'</a>.
</p>

The named anchor is named, "parts", and it does not have an href attribute. Further down the page, we have a link to this named anchor, specified by, href="#parts". Note that it is the pound sign in the URL that 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".

If you select the link, you will jump to the 'Parts of the URL' heading, which is near the top of this page.

Named Anchor Usage

• You can combine named anchors with longer URLs: for example, http://www.goer.org/HTML/basic/links/#parts.
• Don't ever give two anchors the same name on the same page.
• You may enclose HTML content within a named anchor's beginning tag and end tag. For example, <h4><a name="#parts"><Parts of the URL</a></h4> would have been roughly the same as placing the (empty) anchor just before the heading.
• Whether or not you enclose content in a named anchor, you must always close the named anchor: <a></a>

Anchor Titles

The optional title attribute allows you to provide a little extra information about the link. Some (older) browsers will ignore this attribute, but others will produce a little floating "tooltip" if you hover your mouse over the link: Hover over this link.

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.