What is the point of calling it the World Wide Web if there are no links between pages? You've no doubt been wondering about this as you waded through the past few lessons on the other kinds of tags: "Yeah, this is all fine, but how do I link?" Hopefully this page will answer that question!

Remember that every page on your site can be reached either from a relative URL or an absolute URL. If you've forgotten the difference, take a glance back at the common concepts page to refresh your memory. You will generally want to use relative URLs when linking from one page to another within your site, and use absolute URLs when linking to another web site. Likewise, someone else who wants to link to your pages will need to use an absolute URL as well.

Let's start with an easy question: How do you make a page suitable to be the destination of a link? Easy! Just by being on the Web, your page has both relative URLs (which vary depending on where it is linked from, or specifically the source of the link) and one absolute URL which is invariant. Anyone (including you, of course) can link to any page just by knowing the URL.

Being the source of the link isn't much harder, either. This is done using the <a> (anchor) tag:

<a href="destination" target="frame">visible-link-text</a>

The <a>...</a> tag set works by associating the visible-link-text (what the visitor sees) with the destination, a relative or absolute URL to specifying where the link goes. Normally the visitor can see the destination URL in a status line of the browser, but this is not always the case. When the user selects the visible-link-text, the browser refers to the destination URL and retrieves that page for viewing.

Here's an example. Let's say you would like to allow visitors to link to the World Wide Web Consortium (W3C). The preceding sentence, with its link to W3C, would look like this in HTML:

Let's say you would like to allow visitors to link to the <a href="http://www.w3c.org" target="_top">World Wide Web Consortium (W3C)</a>.

Notice that the URL, http://www.w3c.org, is visible in the HTML code but does not display in your browser (unless you have a graphical screen and hold your mouse over the link without clicking). The advantage of this approach is that your links can flow in a natural way along with your text. We'll talk more about that later in this lesson.

The target attribute is optional, and is mainly used if you are creating a web site with frames, which we haven't discussed yet. It specifies which frame will receive the destination page if the user chooses this link. For now, you can omit target entirely, except that you might want to use the special value of "_top" to insist that the linked page fill all frames (in this case, you probably have only one, namely the main browser window). Or you may want to (occasionally!) cause the link to open a separate browser by specifying "_new" for the frame. That technique should be used very sparingly, as users quickly become annoyed with a proliferation of new browser windows on the screen. If target is not given, the default behavior is to open the linked page in the same window where the link was selected, which is a very reasonable choice in most cases.

Linking to other pages is easy, using the anchor tag as shown above. But when there is a very long web page, it is often helpful to be able to link directly into the middle of the page, so that the visitor can find a particular topic (such as one item in a long list or glossary) without having to scroll around. Here is how this can be accomplished:

<a name="bookmark">linked-text</a>

This variety of the <a>...</a> tag set establishes a bookmark within your page. This is a special kind of anchor which allows links not only to the page, but to a specific location in the middle of that page. So the browser, upon arriving at a bookmarked link, will automatically scroll down so that the bookmark text (the linked-text shown above) is at the top of the browser window.

Links to a bookmark take a special kind of URL, and once again these URLs can be either relative or absolute. The bookmark is appended to the regular URL for the page, after an octothorpe (#) character. If you are linking within the same page you can omit the regular URL entirely and use just the #bookmark format. Here are some examples, assuming we have a glossary page with an entry for lizards, marked as

<a name="lizards">Lizards</a> are reptilian creatures.....

You could link to that bookmark in several ways:

<a href="http://www.4th.com/animals/glossary.html#lizards"> lizards </a>

takes you to a bookmark called "lizards" on a page called "glossary.html" on the www.4th.com web server. All the rest of the URL (everything before the # character) is the same as what you've already learned.

<a href="glossary.html#lizards">lizards</a>

would get you to the same place, so long as the document containing the link is also located in the /something/else directory on that same web server.

<a href="#lizards">lizards</a>

will also get you to this glossary entry, but only from somewhere else on the very same page. Such internal links are very useful in helping you to return to an earlier part of the same page, for example, or perhaps in jumping to a topic further down the page.

<a href="#Lizards">lizards</a>

will not work at all! Bookmark links are case-sensitive, and that upper-case "L" doesn't match the name attribute of the bookmark anchor. This is a very common mistake when making bookmarks, and is another reason why I recommend that you use all lower case for URLs of all types. Personally, I use all lower case for main URLs and all upper case for bookmarks, to make them easier to see. This is just a stylistic choice; the important thing is that you pick a style that works for you and then stick with it, to avoid these subtle errors that can be so hard to find.

No matter which type of anchor tag you use, remember to add the </a> closing tag! If you forget to do this, you will get a huge glob of text that will highlight in the browser, as I am intentionally illustrating in this sentence. Ugh! There...that's better.

Making Your Links Flow Naturally

Much of the elegance of the Web is casually thrown away by many web designers, who don't even realize what they are giving up. How many times have you seen a web site that says, "If you would like to see my vacation pictures, click here." Awkward, awkward, awkward! The link is calling attention to itself, making it very difficult to read the surrounding text in a natural way. If you don't happen to be interested in the links, the document itself should read smoothly and easily, as if it were printed on paper. Remember that, if your site is really useful, it is quite possible that people will actually print your pages for later reference. Those little "click here" bits have no use at all in print.

Instead of the self-conscious "click here" link, try making the link a more subtle part of the text. Take a look at the previous lesson which gave you an overview of the different types of tags, for instance, to see how this might be done. Remember that the browser itself will  highlight all of the links on the page, to make them easy to see -- you don't have to do this by wording them in a clumsy way.

A good way to make your links flow naturally is to simply write the text without thinking about links, then go back and add the links later to the appropriate part of the text.