Jan's Guide to HTML

Lists

Contents: Unordered list - Ordered List - Definition Lists - COMPACT Attribute - Nested Lists

Chapters

Table of Contents
Introduction
Basic HTML
Text
Images
Lists
Anchors
Tables
Frames
Forms
Javascript
SSI
CGI & Perl
Style Sheets
Special characters
Colour examples
HTML resources
Recent Updates
Index

Unordered List

An unordered list shows items with just a plain bullet before them. Look at this example:

<UL>
<LI>Dog
<LI>Cat
<LI>Cow
</UL>

White space is automatically put before and after the list. There is no need to do this with <P> or <BR> tags. This is the same for all other types of lists.

Both the <UL> and <LI> tag can take the attribute TYPE. This can take the values of "disc", "circle" or "square". If you include this attribute in the <UL> tag, it will affect the whole list. If you include it in a <LI> tag, the attribute will affect that item and all the following ones. This is how it looks:

<UL>
<LI TYPE=disc>Dog
<LI TYPE=circle>Cat
<LI TYPE=square>Cow
</UL>

As you can see from these 2 examples, the default for TYPE is "disc".

Ordered List

In the ordered list each item gets a number, automatically. The items are also indented. Each item should start with the <LI> tag. Unordered lists look like this:

<OL>
<LI>Train
<LI>Airplane
</OL>

  1. Train
  2. Airplane

The result is almost the same as an unordered list, except that in the unordered list the items do not get a number but a bullet before them. The <OL> tag accept the START which sets the value of the first item in the list.

<OL START=5>
<LI>Train
<LI>Airplane
</OL>

  1. Train
  2. Airplane

The <LI> tag accepts the value attribute, setting the value for that item. The subsequent items will be numbered accordingly.

<OL START=5>
<LI>Train
<LI>Airplane
<LI VALUE=10>Car
<LI>Boat
</OL>

  1. Train
  2. Airplane
  3. Car
  4. Boat

Both the <OL> and the <LI> tag accept the TYPE attribute. TYPE can take the values "A" (items will be numbered with capital letters), "a" (numbered with small letters), "I" (capital roman numerals), "i" (small roman numerals) or "1" (regular numbers). Regular numbers is the default. If you put the TYPE attribute in the <OL> tag is influences the whole list, it you put it in the <LI> tag, it affects that item and the subsequent ones.

<OL TYPE=A>
<LI>Train (1)
<LI>Airplane (2)
<LI TYPE=a>Car (3)
<LI>Boat (4)
<LI TYPE=I>Underground (5)
<LI>Bus (6)
<LI TYPE=i>Tram (7)
<LI>Bicycle (8)
<LI TYPE=1>horse cart (9)
<LI>On foot (10)
</OL>

  1. Train (1)
  2. Airplane (2)
  3. Car (3)
  4. Boat (4)
  5. Underground (5)
  6. Bus (6)
  7. Tram (7)
  8. Bicycle (8)
  9. Horse cart (9)
  10. On foot (10)

Definition Lists

A definition list (also referred to as glossary list) has elements that consist of two parts: a term and its definition. For example:

<DL>
<DT>A Cat
<DD>A furry, four-legged animal
<DT>A Snake
<DD>A legless thing that slithers on the ground
</DL>

A Cat
A furry, four-legged animal
A Snake
A legless thing that slithers on the ground

COMPACT Attribute

The optional COMPACT attribute can be used with ordered, unordered and definition lists to tell browsers to display lists in a more compact manner. for example:

<UL COMPACT>
<LI>Dog
<LI>Cat
<LI>Cow
</UL>

<UL>
<LI>Horse
<LI>Chicken
<LI>Pig
</UL>

It is well possible that these two lists look identical on your screen. I have not yet found a browser that uses the COMPACT attribute, which perhaps explains why this attribute was discontinued in HTML 4.0.

Chapters

Table of Contents
Introduction
Basic HTML
Text
Images
Lists
Anchors
Tables
Frames
Forms
Javascript
SSI
CGI & Perl
Style Sheets
Special characters
Colour examples
HTML resources
Recent Updates
Index

Nested Lists

It is possible to put lists within lists. An example:

<OL>
<LI>Train
  <UL>
  <LI>Intercity
  <LI>Regional
  <LI>Local
  </UL>
<LI>Airplane
<LI>Boat
<LI>Car
</OL>

  1. Train
    • Intercity
    • Regional
    • Local
  2. Airplane
  3. Boat
  4. Car

With nested lists you can use all the options and attributes mentioned in this chapter.


Please send comments and suggestions to me by [email protected].
I will also try to answer any questions you may have.

©1995-2002 Jan C.H. Weijers. All rights reserved.

I'd be pleased if you would visit my home page.

HTML 4 (transitional)