Navigation in Hypertext

Facilitating Global Navigation & Search

When constructing a single Web page you have to remember always to identify and place it within the overall context of your Web site. It is important that you keep your local and global navigation rules clear and simple.

The use of appropriate icons and buttons can help navigation. In this tutorial we have used both icons (in the form of image maps) and textual hypertext navigational links. A global table of contents has identified the sequential nature of the tutorial. We have made sure that each individual page had an "I am here indicator" indicator, and all pages have been clearly signed and marked for their current status.

At this point, we should bring in your attention the need for your pages to be search-engine friendly. By using the appropriate HTML header tags one can index his/her Web pages and site and allow search engines and their users to locate the content the constructed pages.

There are various useful elements that one should use to facilitate search. Within the HEAD element, one can use some of the existing optional elements that help search (and navigation!). Here follows their name and a brief description of their functionality:

  • Base Address Element <BASE>
  • Keyword Index Element <ISINDEX>
  • Link Element <LINK>
  • Associated Meta-information Element <META>

The ISINDEX element indicates that the user agent (i.e. the browser) should provide a single line text input field for entering text strings for queries. This element has the PROMT attribute, which can be used to specify a prompt string for the input field. For example: <ISINDEX PROMPT="Search Phrase??>

The BASE element gives the base URL for further dereferencing of relative URLs inside the document or set of documents. So for example one does not need to define the whole URL for the path that identifies the location of images if he had used the BASE element inside the HEAD element. For example:


and thereafter any subsequent hyperlink reference does not need the full path:

<IMG SRC= "images/bullet.gif">

The LINK element provides a way (media independent) for defining relationships with other documents and resources.

Finally, the META element can be used to include name/value pairs describing particular properties of the document, such as author, keywords, etc. This element has a NAME and a CONTENT attribute. This is an important element as it makes your page search-engine friendly.

We have used the following searchable elements in our introduction page:

<META NAME="generator" CONTENT="Theodoros N. Arvanitis">
<META NAME="description" CONTENT="Advanced HTML Authoring and Effective WWW Page Design. A Tutorial for Issue 2 - SIM Quarterly">
<META NAME="keywords" CONTENT="Theodoros N. Arvanitis, html, hypertext, advanced html tutorial, web design, SIM Quarterly"> Appropriate For example: <META NAME="Author" CONTENT="My name">

Source: Theodoros

Navigation in Hypertext Design Tips

Last modified: 6 Nov 2002 by Kathy Nguyen Dang