HTML Navigation Guidelines


Guidelines:  Keywords and Description  Home Page  Major Sections  Obvious Links  Corresponding Textual Links  Consistent Links  Minimize Degrees of Separation  Download Sizes  Relative URLs  Functional Links and Anchors

Keywords and Description

Use the &ltMETA> tag to provide a set of keywords and descriptions for the home page and major section pages.

Rationale: Internet directories and search tools use the keywords and descriptions to categorize and find these pages.

Example:&ltmeta name="Keywords" content="...">

Home Page

Every webpage should have a link to the home page.

Rationale: Users can get lost in large websites, and need an easy way to start over. Search engines may cause users to link into the middle of a website.

Major Sections

Every webpage should have links to the webpages of major sections. This should include the webpages for making money (e.g., ordering).

Rationale: This allows users to rapidly navigate to the major sections.

Obvious Links

Every link (especially graphic and imagemap links) should be obvious as links. Graphic links should have beveled edges, but no other image should have beveled edges. Graphic links and imagemap links should have mouseover comments indicating the destination of the link. Textual links should be labeled with the destination, not something lame like "click here".

Rationale: This allows users to easily navigate to other pages. Beveled edges on graphic links make them look like clickable buttons. Mouseovers allow users to know the distination of nontext links.

Corresponding Textual Links

Graphic and imagemap links should have corresponding textual links.

Rationale: This enables users who have turned off graphics (to increase download speed) or who click on the stop button before the images completely load to navigate.

Consistent Links

Links should be consistent:

Rationale: This enables users who have turned off graphics (to increase download speed) or who click on the stop button before the images completely load to navigate.

Minimize Degrees of Separation

No webpage should be more than 4 links from the homepage. Create a site map webpage that allows users to directly link to every webpage.
Rationale: This enables users to easily and quickly navigate to any webpage.

Download Sizes

Specify the sizes of large (> 20KB) webpages and files.

Rationale: This enables users to decide if they want to wait for a long download before clicking on the corresponding link.

Relative Rather than Absolute URL

Use relative URLs when linking to other pages within the same website.

Rationale: Relative URLs are more maintainable, because they require fewer changes when subdirectories move.

Functional Links and Anchors

Regularly use a link analyzer to evaluate the website for broken anchors and links. This is especially true for links to external websites that may move or go out of business.

Rationale: No user likes to navigate broken anchors and links.




HTML Design and Coding Standards:  Content  Look and Feel  Behavior  Navigation  Text  Color  Images  Sound