Menu Systems for Website Navigation

1.  Basic HTML links

Consider a set of basic HTML links with separators between them, enclosed in a <div>:


<div>

  <a href="Target1.html" title="Test button #1">Link 1</a>

  |

  <a href="Target2.html" title="Test button #2">Link 2</a>

  |

  <a href="Target3.html" title="Test button #3">Link 3333</a>

</div>

The results of the above code is shown below.  Click on one of these links and you will be returned to this page:


Link 1 | Link 2 | Link 3333

In HTML, links can have up to four different colours - normal, visited, hover (when the mouse is moved over the link) and active (when the mouse button is held down over the link).

Just click on one of these links for now, so you can see the difference between a visited and unvisited link.  (If you have already clicked all three of them, you can reset them to normal by clearing your browser's history.)

These links inherit the default browser colours.  By default, the links are usually underlined.  The default appearance of links can usually by specified in the browser's settings.

It is possible to specify colour attributes for normal, visited and active links in the <body> tag, but these are marked as "deprecated" in the W3c standards.  This method cannot be used in any "strict" DOCTYPE.  IE browsers also allow you to set the hover colour, but this was never part of any W3c HTML or XHTML standard.

Even at this basic level, different browsers handle the appearance of these links in different ways: