Sponsored Links

Navigation Elements

What makes the web the web is the ability to define relationships and links between documents anywhere in the world. The element behind this magic is the <A> element. The <A> element serves two purposes: The first is to define a relationship between contents you are viewing and a destination document, and the second is to define a destination for the first type of link to automatically navigate to.

Creating a link between two documents is done with by combining the <A> element with an HREF attribute. For example, a link to this page is specified as:

<A HREF="http://www.insideDHTML.com/html/navigation.asp">
  Navigation
</A>

In the above link, we defined an absolute path to the document. This means that no matter where the above link is copied or moved, it always points to the same document. Many sites use relative links which are links that define the path in relation to the current document. For example, all the pages in this tour are contained within the same directory. Therefore, all the links were specified similar to the following:

<A HREF="navigation.asp">Navigation</A>

A relative link usually will only work from a very specific place on a particular server. If you moved the above link to another document in another directory, the page will not be found because there is not enough information being specified.

In addition to pointing to other documents, you can point to a particular location within the same document or within the target document. This is done by referencing the NAME or ID of the target element. For example, The <A> element is discussed at the following location in the HTML 4.0 recommendation:

http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2

Notice the addition of #h-12.2 to the URL? This reference points to a particular anchor in the document. If you were to look at the raw HTML of this page, you would find the following reference:

<a name="h-12.2">12.2</a> 

The name specifies where in the document to locate when navigating to the URL. Prior to HTML 4.0, you could only specify named locations using the NAME attribute on the <A> element. HTML 4.0 extends this concept of naming elements to any element. Now, if you want to specify a target to the first header of your page, you can define it as follows:

<H1 ID=h-1.1>Section 1.1 - Introduction</H1>

Creating a link to this anchor is done the same way you define a link to a traditional anchor:

<A HREF="#h-1.1">Section 1.1 - Introduction</A>

This technique is only supported by Internet Explorer 4.0 and not by Netscape Navigator 4.0 or earlier versions of either. However, if you use this technique, the only negative effect is that in browsers that do not support referencing elements other than anchors will navigate to the top of the page instead of to the appropriate section.

Later in this tour we will revisit navigation when we discuss frames and framesets. The <A> element supports an additional attribute for specifying the target window or frame for any navigation. For now, we will continue onward with HTML Tables. HTML 4.0 adds new attributes that give you much increased control over column groupings and border.

Tables...