§ Contents Glossary Articles Books Software Typeface Webmaster Links

Piglet the lister

Piglet, one of the characters in "Winnie The Pooh", was forever making lists of things. Poor Piglet probably wouldn't have coped well with the Web, getting tangled in the tags and wondering where on earth he was. You see there are three types of list in HTML and while they are not difficult to use, they can be a little confusing at first, since they perform different functions.

On Piglet's list of things to remember should be: "all browsers are not the same". In this introduction I stick with HTML specification 1.1 (mostly what Netscape 1.1 will see) unless otherwise stated. You might ask "But why not teach me the latest and greatest?" and the answer is simple: you may be as sophisticated as you wish, but what you see on your screen will not show up at all in many browsers - it may even crash them. Web creators who take their work seriously wiil never forget this, and for every advanced function they introduce they will also add an "escape route" for people with incapable browsers. That is the polite thing to do - and also the most laborious.

Back to the lists

Unnumbered lists have bullets to the left of text (or dashes, or open squares - as is typical in the fluid world of HTML, you won't know which the visitor's browser will deign to use); ordered or numbered lists display sequential numbers to the left of the text; and definition lists consists of text with indented information set beneath. These list concepts exist because HTML does not recognise tab spaces and some characters like bullets do not display on every web browser.

A list requires an opening and a closing tag to define its structure and style. Closing tags for items contained in a list do exist although many browsers do not require them to identify the end of an item. Since there is no easy way to determine the type of browser a visitor may be using to view your pages (unless you include a JavaScript that performs this function), I would strongly urge you to use closing tags in all your HTML documents. Those of you interested in database publishing should be especially careful, because consistency with beginning and ending tags will make it easy to recognise fields for purposes of re-import into a database.

Ordered and unnumbered lists consist of indented items running down the page. Sometimes these items require additional information subheadings within the list. To ensure that a subheading is not also bulleted or numbered, the <LH> and corresponding </LH> tag is used.

<UL>
<LH>Piglets list of things</LH>
<LI> Item 1</LI>
<LH>Pooh's list of things</LH>
<LI>Item 2</LI>
</UL>

This creates a list that displays as:

Piglet's list of things

Item 1 Pooh's list of things
Item 2

Unnumbered and numbered lists

These lists are very similar in structure and the way the contents are displayed. Both lists use the <LI> and corresponding </LI> tag for each line item. The difference between them lies in the structure definition tags.

An unnumbered list uses the tag <UL> to start the definition, and a corresponding closing tag </UL>. (Netscape understands the form <UL type = shape> , where "shape" can be either "square", "disc" or "circle." A "disc" is the less than obvious term for an open bullet.)

To create a list like this one:

Honey for Pooh
Honey for Tigger
Honey for Piglet

the HTML text is entered as:

<UL>
<LI>Honey for Pooh</LI>
<LI>Honey for Tigger</LI>
<LI>Honey for Piglet</LI>
</UL>

Notice how there are no line breaks ( ) between the <LI> definitions. They are not needed because any text appearing immediately after this tag, until the browser encounters another <LI> tag, is considered part of one item.

A numbered list uses the tag <OL> and its corresponding closing tag </OL>. To create a list like this where the text flows over several lines:

They walked off together
For a long time Piglet said nothing, so as not to interrupt the pots
Then suddenly he made a squeaky sound. . . an oo-noise. . . because he began to know where he was

and would be entered as:

<OL>
<LI>They walked off together</LI>
<LI>For a long time Piglet said nothing, so as not to interrupt the pots</LI>
<LI>Then suddenly he made a squeaky sound. . . an oo-noise. . . because he began to know where he was</LI>

</OL>

In basic HTML there is no way to force a numbered list to start at any number other than 1, which makes it difficult to create lists that jump across paragraphs and continue sequentially. (The HTML 3.0 specification and Netscape introduce this option.)

Definition lists

A definition list contains text headings with definitions listed and indented beneath. The tag for a definition list is <DL> with its corresponding closing tag </DL>. The tag for an item requiring definition is <DT> with its closing tag </DT>; and for the definition itself <DD> and its closing tag </DD>.

A basic definition list such as:

Trying to get home: "They walked off together; and for a long time Piglet said nothing, so as not to interrupt the pots; and then suddenly he made a squeaky noise ... and an oo-noise... because he began to know where he was; but he still didn't dare to say so out loud, in case he wasn't."

would be written in HTML as:

<DL>
<DT>Trying to get home</DT>
<DD>"They walked off together; and for a long time Piglet said nothing, so as not to interrupt the pots; and then suddenly he made a squeaky noise. . . and an oo-noise. . . because he began to know where he was; but he still didn't dare to say so out loud, in case he wasn't."</DD>
</DL>

The tag is used in this example to make the definition item bold. Strong is a basic HTML tag that is interpreted by all browsers as bold; the tag, on the other hand, is not always interpreted accurately as an instruction to bold text.

When you exploit these structures typographically, you may of course use them for specific effect by not following the "rule". It is possible to create a definition list that does not contain text set against the left margin by leaving the <DT> tag empty, although the tag should still be entered:

<DL>
<DT></DT>
<DD>3 pots because he likes it so
<DD>1 pot to put aside for Pooh
<DD>1 pot to hide from Pooh
</DL>

which displays as:

: 3 pots because he likes it so; 1 pot to put aside for Pooh; 1 pot to hide from Pooh

Back to Piglet

Feeling a little confused? Well, there's just one more thing about lists: nesting.

A nested list can be created within and between the preceding list types. For example, by using the <UL> and <LI> tags inside the <DL> and <DD> tags you can create a definition list where the nested text contains bullets.

This list would look like this:

Honey for Pooh

3 pots because he likes it so
1 pot to put aside for Pooh
1 pot to hide from Pooh

and the HTML would be entered as:

<DL>
<DD>Honey for Pooh</DD>
<UL>
<LI>3 pots because he likes it so</LI>
<LI>1 pot to put aside for Pooh</LI>
<LI>1 pot to hide from Pooh</LI>
</UL>
</DL>

So you too can be like Piglet and make lists of things for your home page. Once you have mastered the basics, you can play around with the various effects that can be created by mixing the three types of lists. Happy surfing.

Sources

The Piglet quote is taken from the "Tao of Pooh" by Benjamin Hoff