Introduction to Lists

This section describes how to create lists within your HTML documents. There are a various types of lists that can be created; the most common being ordered (numbered) and unordered (bulleted). Here you'll find out how to customise your lists along with the less less common list types, menu, definition and directories.

Specific Markup

<LI>, <OL>, <UL>, <MENU>, <DIR>, <DL>, <DT>, <DD>, COMPACT

Getting Started

The basic list

Lists are defined by a list type and contain list items. The list type determines how the list items are rendered, i.e. with bullets, numbers and/or indentation. Most browsers render lists indented from the rest of the body text, however it is best not to rely on this as a source of indentation (see Tips n' Tricks for hints on reliable indentation). For complex lists it is perfectly acceptable to nest lists, thus giving multi-level bullet points or numbering. The following example shows how to create a simple bullet point list using the <UL> list type, which uses <LI></LI> as its list item element.

Some bands:
<UL>
<LI>Pulp</LI>
<LI>The Wedding Present</LI>
<LI>Spacemen 3</LI>
</UL>

Some bands:

• Pulp
• The Wedding Present
• Spacemen 3

The Details

Unordered Lists

An unordered list provides each list element with a bullet. As further levels of list are included (this is called nesting), the bullet may change (but not necessarily). An unordered list should be enclosed in a pair of <UL></UL> tags.

• TYPE="disc|circle|square"

Netscape Navigator 2 and MS Internet Explorer 4 upwards only. This optional attribute enables you to select one of the following forms of bullets:

disc
circle
square

• COMPACT

This optional attribute is not widely supported. It is used to to indicate that the list contains only short list items, so it may be rendered in a more compact way.

<UL>
<LI>Pulp</LI>
	<UL>
	<LI>Jarvis Cocker</LI>
	<LI>Candida Doyle</LI>
	</UL>

<LI>The Wedding Present</LI>
	<UL TYPE="square">
	<LI>David Gedge </LI>
	<LI>Simon Smith </LI>
	</UL>

<LI>Spacemen 3</LI>
	<UL COMPACT>
	<LI>Sonic Boom</LI>
	<LI>Jason Spaceman</LI>
	</UL>
</UL>

Some band members:

• Pulp
• Jarvis Cocker
• Candida Doyle
• The Wedding Present
• David Gedge
• Simon Smith
• Spacemen 3
• Sonic Boom
• Jason Spaceman

Ordered Lists

An ordered list provides the list elements will sequential numbering. An ordered list should be enclosed in a pair of <OL></OL> tags.

• TYPE="1|A|a|I|i"

This optional attribute enables you to select one of the following forms of numbering, where type=1 is the default:

1	1, 2, 3, ...
A	A, B, C, ...
a	a, b, c, ...
I	I, II, III, ...
i	i, ii, iii, ...

• START=n

This optional attribute enables you to specify a start value for your list. The value is always specified in terms of 1, 2, 3, etc. regardless of any TYPE attribute.

• COMPACT

This optional attribute is not widely supported. It is used to to indicate that the list contains only short list items, so it may be rendered in a more compact way.

<OL TYPE="i" START=2>
<LI>At junction 10 take the M3 towards Sunbury.</LI>
<LI>Turn off at junction 1 of the M3 and head towards Kingston</LI>
<LI>3 miles after Kempton Park, take a left by The Bell pub.</LI>
</OL>

2. At junction 10 take the M3 towards Sunbury.
3. Turn off at junction 1 of the M3 and head towards Kingston
4. 3 miles after Kempton Park, take a left by The Bell pub.

Directory Lists

Directory lists are similar to unordered lists with the exception that they should not be nested and the list item marker, <LI> does not take any attributes. They are typically used to create a list of short items, usually up to 20 characters in length. An directory list should be enclosed in a pair of <DIR></DIR> tags.

Bread roll:
<DIR>
<LI>Mole</LI>
<LI>Foal</LI>
<LI>Vole</LI>
<LI>GOAL!</LI>
</DIR>

Bread roll:

Mole

Foal

Vole

GOAL!

Menu Lists

Menu lists are similar to unordered lists with the exception that they should not be nested. Some browsers render a menu list more compactly than an unordered list. A menu list should be enclosed in a pair of <MENU></MENU> tags.

Send Cheyenne:
<MENU>
<LI>Piranhas</LI>
<LI>Tibetan Llamas</LI>
<LI>East Anglian farmers</LI>
<LI>PYJAMAS!</LI>
</MENU>

Send Cheyenne:

Piranhas

Tibetan Llamas

East Anglian farmers

PYJAMAS!

Definition Lists

Definition lists display a list of paired terms and definitions. Line breaks between each item should be automatically generated and the definition shown indented. Unlike all the previous list types, definition lists do not make use of the <LI></LI> list item element. Instead the <DT></DT> tag is used to indicate the definition term and <DD></DD> tags contain the corresponding definition. A definition list should be enclosed in a pair of <DL></DL> tags.

The COMPACT attribute can be used with the <DL></DL> tag to create a more 'compact' list if the list is large or the individual items are small (not many browsers support this attribute).

Some definitions:
<DL>
<DT>plasma</DT>
<DD>a hot ionized gas containing positive ions and electrons</DD>
<DT>thyristor</DT>
<DD>a semiconductor rectifier whose forward current between two electrodes, the anode and the cathode, is initiated by means of a signal applied to a third electrode, the gate. The current subsequently becomes independent of the of the signal.</DD>
</DL>

<DL COMPACT>
<DT>quintessence</DT>
<DD>the most typical representation of a quality, state, etc.</DD>
</DL>

Some definitions:

plasma

a hot ionized gas containing positive ions and electrons

thyristor

a semiconductor rectifier whose forward current between two electrodes, the anode and the cathode, is initiated by means of a signal applied to a third electrode, the gate. The current subsequently becomes independent of the of the signal.

quintessence

the most typical representation of a quality, state, etc.

Frequently Asked Questions

Why doesn't my TYPE attribute work?
Although the TYPE attribute is a legal part of HTML 3.2 it is not supported by MS Internet Explorer 3 and below.

Why doesn't my the COMPACT attribute make any difference?
Although the COMPACT attribute is a legal part of HTML 3.2 it is not widely supported; neither MS Internet Explorer nor Netscape Navigator render this attribute.

How can I create a numbered list such that subsections are automatically number 1.1.2, etc.
Unfortunately this is not currently possible. If you really need precisely this kind of numbering, your only choice is to create an ordered list without the list item tags and include your own numbers. Also remember that you cannot guarantee that every browser will indent the different list levels.

Useful References

• W3C: HTML 3.2 Reference Specification Recommendation