Hypertext links

The one concept which transformed collections of electronic documents into the World Wide Web was the ability to link documents to each other. A hypertext link is identified by a piece of text which is highlighted (in some way) and the target document is given as a URL. The element is the <a> element and has the following format:

<a href="url of document to link to">Text to be highlighted</a>

For example:

See what Bill Gates has to offer!

Is coded as:

See what <a href="http://www.microsoft.com">
            Bill Gates</a> has to offer! 

Notice that the URL is a complete reference to the website, including the http:// reference. If you do not specify the protocol (http://) the web server will assume you are referring to a local document (i.e. on the same web server as your current page). For example, to link to a file called marketing.html which is in the same folder as the current web page your XHTML will be:

<a href="marketing.html">Go to Marketing web page</a>

You can refer to documents in subfolders, and even parent folders, but we will leave this until later. You can also refer to websites on your web server relative to the web server's home page (do not confuse this with your website's home page, as lots of web servers host multiple websites) but again we will leave this until later.

Hypertext links may be used free flowing within the page content, but another important use will be in a set of navigation links for getting round your website. The most natural structure/representation for a set of navigation links is a list. In this case each list item <li> will contain a <a> element. For example:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="sales.html">Sales Dept.</a></li>
  <li><a href="marketing.html">Marketing Dept.</a></li>
  <li><a href="research.html">R&D Dept.</a></li>
  <li><a href="custserve.html">Customer Services</a></li>
</ul>

Resulting in:

Note: This list can have its appearance changed using CSS, including such effects as roll over buttons and horizontal rather than vertical layout. Is there a valid argument for representing a list of links in any other way? Discuss!

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera