HTML Topics: Lists

Course Material Index  Section Index  Previous Page  Next Page 

Lists

There are three types of lists: ordered, unordered and descriptive. These are described in the following sections.

Ordered Lists

An ordered list has the members of its list numbered. Each member of the list is enclosed by <LI> and </LI> tags, and then the entire list is enclosed by <OL> and </OL> tags. For example:

<OL>
<LI>first</LI>
<LI>second</LI>
<LI>third</LI>
</OL>

produces

1. first
2. second
3. third

The attribute TYPE with a value is used to change the numbering style. For example:

<OL TYPE="a">
<LI>first</LI>
<LI>second</LI>
<LI>third</LI>
</OL>
<OL TYPE="i">
<LI>first</LI>
<LI>second</LI>
<LI>third</LI>
</OL>

produces

1. first
2. second
3. third

1. first
2. second
3. third

Note: The closing tag ( </LI> ) for items in the list can usually be omitted, but the closing tag for the list itself ( </OL> ) is essential. This comment applies also to the other types of list described below.

Unordered Lists

This is used if you don't want the list members numbered. Each member is enclosed by <LI> and </LI> tags as before, but the entire list is enclosed by <UL> and </UL>. For example:

<UL>
<LI>England</LI>
<LI>France</LI>
<LI>Germany</LI>
</UL>

produces

• England
• France
• Germany

Descriptive Lists

In a descriptive list each item can be followed by descriptive text. Each member name is enclosed by a <DT> and </DT> tags, and the description of the member by the <DD> tag. The entire list is then enclosed by <DL> and </DL>. For example, here is a "described" shopping list:

<DL>
<DT>Milk</DT>
<DD>Full fat, Semi-skimmed, Skimmed.</DD>
<DT>Fruit</DT>
<DD>Oranges, Grapefruits.</DD>
<DD>Apples, Pears.</DD>
<DT>Cheese</DT>
<DD>Brie, Camembert, Stilton.</DD>
</DL>

produces

Milk

Full fat, Semi-skimmed, Skimmed.

Fruit

Oranges, Grapefruits.

Apples, Pears.

Cheese

Brie, Camembert, Stilton.

Course Material Index  Section Index  Previous Page  Next Page