DESIGNING YOUR OWN WEBSITE

Vicky Vickers

PART TEN: LISTS
Ever wondered how web designers got hanging indents into their pages? It is really very simple. They use ordered and unordered lists. These tags aren't true hanging indents, as they indent the number as well as the text. But they do line the text up under the first character of the first line the same way that a hanging indent does.

Ordered Lists
An ordered list is one where each line begins with a number. For example:

  1. Roses need pruning once a year
  2. Bulbs should be planted in the fall
  3. Geraniums don't live through the winter

Notice that the number as well as the text is indented. If it is a long sentence, then the text wraps under itself, leaving the number sitting alone - a hanging indent. The tags required to produce this are <OL> and </OL>, OL standing for Ordered List. The numbers are produced by the tag <LI> which stands for List Item. Therefore it would look like this:

<OL>
<LI> Roses need pruning once a year
<LI> Bulbs should be planted in the fall
<LI> Geraniums don't live through the winter
</OL>

Unordered Lists
If you would prefer to have a bullet at the beginning of each line instead of a number you would use the tags <UL> and </UL>, UL standing for Unordered List. This produces a hanging indent similar to the ordered list with the bullets produced by the <LI> tag. Only difference to using a bullet in a word processing document is that the HTML bullets are much larger. For example to produce:

You would write it as:

<UL>
<LI> Camellias are an early blooming perennial plant
<LI> Chrysanthemums produce beautiful fall blooms
<LI> Winter pansies bloom all year
</UL>

There are three other types of lists. The Directory List, <DIR></DIR>, and Menu List <MENU></MENU> both use the <LI> tag, producing a bullet and as far as I can see doesn't do anything differently than the Unordered List. The Definition List <DL></DL> has two tags use inside its main tags, <DT> and <DD>. The <DT> tag produces the paragraph at the margin and the <DD> tag creates a hanging indent like the unordered list. An <LI> used with the <DD> tag again produces a hanging bullet.

Stacking Lists
You can place lists within lists to produce a series of hanging indents such as are often found in articles, papers, legal documents, etc. Each list inserted indents further. Keep in mind that the average web browser is using a 14" monitor and don't get too carried away with multiple hanging indents, three is probably the limit to be readable.

Tip
You can use the <LI> tag to create a bullet at the beginning of any line in your document. It won't indent without a OL or UL tag, but by itself, it will produce a bullet.

Acknowledgements
This article was published in the December 1996 issue of the Victoria Macintosh Users Group's monthly newsletter "MACtalk" in Vicky's monthly article "VMUG On-Line" and in the Spring 1997 issue of the Web Enthusiasts Association of Victoria's quarterly on-line newsletter.

Vicky Vickers is the owner of Word Crunchers, Etc. which specializes in website design and HTML training. She is a past-president (1994-6) and former webmaster (1995-8) of Victoria Macintosh Users Group (VMUG). She also founded and was the first president (1996) of the Web Enthusiasts Association of Victoria (WEAV).

All rights reserved. For commercial purposes, no part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording, Internet, or any information storage and retrieval system, without the express permission in writing from the author.

Return to Library Index


Call me today at 250-595-6593 to discuss your website design
or e-mail me at vicky@crunchers.bc.ca

Vicky Vickers, Word Crunchers, Etc.
3290 Shelley Street, Victoria, BC, V8P 4A5
Fax: 250-595-7384 (call first)


Copyright 2000 by Word Crunchers, Etc. ([an error occurred while processing this directive] )