HTML 4.0 Sourcebook:Introduction to the HyperText Markup Language

To access the contents, click the chapter and section titles.

HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Table of Contents

Tips for Effective Hypertext Links

Hypertext links are easy and can be very useful—in fact, it is fair to say that they are the most important feature of an HTML document. However, it is easy to get carried away with hypertext links, and they can quickly become a source of irritation to readers of a document. The following sections outline a few suggestions for ways to include links in an HTML document without detracting from the presentation and readability of the text. Most of these issues are illustrated in Figures 1.13 and 1.14.

Create hypertext links that flow naturally from the text. Make the link appear as a natural part of the text, so as not to interrupt the flow of reading, Thus, it is better to write:

<p> The issue of hormone-controlled ostrich-feather
    growth has recently been a topic of
intense <A HREF=“ostrich-paper.html”>interest</A>

than:

<p> For information about current hormone-controlled
     ostrich-feather
growth press <A HREF=“ostrich-paper.html”> here </A>

Keep linked text strings short. It is much more effective to link to a single word or selection of words than to a whole sentence. Thus such links as

<p> <A HREF=“animal.html”>the life cycle of the
       atlantic polar-bear ocelot</A>  is a complex and
interesting example of ...

are better written as:

<p> The life cycle of the  <A HREF=“animal.html”>atlantic
  polar-bear ocelot</A> is a complex and interesting example
of ...

Link text-related icons and text together. Occasionally, you will want to use a small icon to indicate a hypertext link. To make this clearer to the reader, it is sometimes useful to include the text adjacent the icon within the anchor.

Create menus of links for navigational purposes. It is easiest to navigate a collection of documents if the navigational links to adjacent pages or to the home page are grouped together and always appear at the same place on all pages. Figure 1.18 illustrates some simple ways this can be done.

There are no hard and fast rules for creating bad and good link presentations. In general, if you are adding links within a text document that you want easily read, it is best to make the links as unobtrusive as possible.

Using the URL as the Linked Text

It is sometimes appropriate to include the URLs as part of the text—you don’t always have to hide the URL inside HREF attributes. This is particularly useful if a document is likely to be printed, since the URL references are otherwise not visible. For example, the Web FAQ (Frequently Asked Questions) document, a wonderful repository of useful information about the World Wide Web, contains sentences such as:

<p> ....The original home of the WWW F.A.Q. is
<A HREF=“<http://www.boutell.com/faq/>”><http://www.boutell.com/faq/</A>.

Figure 1.13 Listing for the document badlinks.html. This document illustrates good and bad examples of hypertext links. A Microsoft Internet Explorer rendering is shown in Figure 1.14.

<HTML>

<HEAD>
<TITLE> Examples of Bad Hypertext Links </TITLE>
</HEAD>
<BODY>
<H1> Examples of Good/Bad Hypertext Link Design</H1>

<p> <B> 1) Don't distort the Written Text  </B>
<p> <B> Good: </B>
<BR>the issue of hormone-controlled ostrich-feather growth has recently
    been a topic of intense <A HREF=“ostrich-paper.html”>interest</A>.

<p> <B> Not So Good: </B>
<BR> For information about current hormone-controlled ostrich-feather
     growth press  <A HREF=“ostrich-paper.html”>here</A>.
<p> <B> 2) Keep the linked text section short. </B>
<p> <B> Good: </B>
<BR> The life cycle of the  <A HREF=“animal.html”>atlantic polar-bear
     ocelot</A> is a complex and .......

<p> <B> Not So Good: </B>
<BR> <A HREF=“animal.html”>the life cycle of the atlantic polar-bear
     ocelot is a complex</A> and .......

<p> <B> 3) Link Icon and Text Together </B>
<p> <B> Good: </B>
<BR> <A HREF=“file.html”><IMG SRC=“home.gif”> The latest</A> home
     security systems breakdown show......
<p> <B> Not so Good: </B>
<BR> <A HREF=“file.html”><IMG SRC=“home.gif”></A> The latest home
     security systems breakdown show......

</BODY>
</HTML>

If you are reading the HTML document online, just click on the anchored text to view the referenced document. If reading the paper version, you can see the printed URL and have the information you need to access the site when you next have access to the Internet (go to www.boutell.com/faq/).

Figure 1.14 Microsoft Internet Explorer 3 rendering of the file badlinks.html (shown in Figure 1.13).

Lists, Paragraphs, or Menus of Links

If putting together a collection of links, think carefully about their organization. Should they be placed within in a paragraph? Probably not. More likely, they should go in a list or as a menu bar (a horizontal list of text or graphical buttons linked to the desired objects). A collection of links should also be arranged in a logical manner—a page full of random links is exceedingly frustrating to use. Link-mania pages containing seemingly random collections of links occur quite innocently, often when you have been slowly assembling lists of interesting URLs. The collection may be fine for personal use, but will be confusing to anyone else.

Figure 1.16 shows a simple home page constructed using some of the features of “bad” anchor design (the source for this document is in Figure 1.15), while Figure 1.18 shows an improved and better organized page using the suggestions given in the preceding paragraph (the source is in Figure 1.17.) Note that Figure 1.18 is much easier to understand than Figure 1.16, even though Figure 1.18 actually contains less textual information.

Validate All Hypertext Links

Finally and most important of all: Make sure all hypertext links work and go to the right place! There is nothing worse than clicking on a link, only to get “ERROR. Requested document not available” in response. Actually, that’s not quite true. It is even worse to click on an anchor that indicates a particular destination, only to find that you have actually accessed something completely different and obviously incorrect. Errors like these tell a reader that the document developers did not bother to check their work, which immediately brings into question the accuracy of the documents themselves. It is easy to check links: Indeed, there are automated software packages that can help (see “Web Management and Maintenance Tools” on the companion Web site). So, as the Nike ads say: Just do it.

Lessons from Example 2

1. Images are included via the IMG element:

<IMG src=“prism-small.gif” ALT=“[Text stuff]”>

SRC specifies the URL of the image file to be included, while the ALT attribute gives a text string to be displayed by browsers that cannot display images. The ALIGN attribute specifies how the image should be aligned with the surrounding text, while the HEIGHT and WIDTH attributes can specify the size (in pixels) of the image.

2. Hypertext links to another document are included using the A (anchor) element

<A HREF=“SubDir/example1.2B.html”>hypertext links</A>

where HREF is used to specify the URL of the target of the link. The examples here are of partial URLs: Partial URLs assume the same Internet site and protocol as for the document currently being viewed and look for the file (or resource) relative to it. In this regard the slash (/) and double dot (..) characters are special, representing relative positions in the directory (or other) hierarchy.

3. Images can also be hypertext anchors via constructs such as:

<A HREF=“someplace.html”><IMG SRC=“image.gif”></A>

4. Don’t use hypertext links gratuitously. If they are embedded in the text, try to make them flow with the text. If a paragraph has many links, try thinking of another way to present the material: Maybe it should be a list or a menu, or perhaps the hypertext anchors could be combined into a less intrusive form. Above all, make sure the links work; links going nowhere or to the wrong place are cardinal sins of HTML authoring.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.