Creating an Icon Link List

An icon link list is created using icon bullet images, instead of a UL (Unordered List) element. This method uses left-floating bullet images in conjunction with the HSPACE and VSPACE attributes to create an icon link list, with up to two lines indented in from the bullet icon. In the Egg Links section, turn the links that are already there into an indented icon link list (see Figure 4.13):

<p><img src="redball.gif" align="left" hspace="5" vspace="3"
alt="*"><a href="/">Egg Tips and
Frequently Asked Questions</a> from the Manitoba Egg
Producers. Find lots more information on eggs, including egg
cookery tips.<br clear="left">
<img src="redball.gif" align="left" hspace="5" vspace="3"
alt="*"><a href="/">Egg
Recipes</a> from the Iowa Egg Council. Find egg recipes for
breakfast, brunch, appetizers, main dishes, desserts, holiday
favorites, and more.<br clear="left">
<img src="redball.gif" align="left" hspace="5" vspace="3"
alt="*"><a href="/">American Egg Board</a>.
A source for information on the egg industry, egg products,
egg safety, egg recipes, food nutrition, and more.</p>.

Figure 4.13: The list of links is turned into an indented icon link list.

The HSPACE attribute inserts 5 pixels of horizontal space between the bullet icon and the following text. The VSPACE attribute adds 3 pixels of space above and below the bullet images—this is what actually causes the following wrapping line to be indented in from the bullet. Using HTML, you are limited to only indenting two lines of text using this method, since vertical spacing is added both above and below the image. In the Saturday Evening Bonus session, "Working with Styles," you'll learn how to use a table to create icon link lists with more than two indented lines of text.

The clear="left" attribute in the BR element causes the following list item to clear the previous floating bullet image, if the previous list item has only one line of text.

The alt="*" attribute conveys that an image functions as a bullet and has no other content or function. It also reduces the amount of space the image reference will take up in a text-only browser, or in a graphical browser with display of images turned off.