HTML 3.2 - Lists

Lists

There are several ways to construct lists (or even lists of lists) in HTML. On this page we will examine the unordered list, the ordered list, and the definition list.

Unordered List

The unordered list looks like this:

This is an unordered list.
Each list item is preceded by a bullet whose default appearance depends upon the web browser being used.
- It is possible to have a list within a list.
- This is known as nesting.
- Notice that the bullets at this level may look different, depending upon the web browser being used.
The TYPE attribute can be used to control the shape of the bullet.
- The source code for this is <LI TYPE="DISC">.
- The source code for this is <LI TYPE="SQUARE">.
- The source code for this is <LI TYPE="CIRCLE">.

This is what the source code for the preceding unordered list looks like:

<UL>
<LI>This is an unordered list.
<LI>Each list item is preceded by a <EM>bullet</EM> whose
default appearance depends upon the web browser being used.
<UL>
<LI>It is possible to have a list within a list.
<LI>This is known as <EM>nesting</EM>.
<LI>Notice that the bullets at this level may look different, depending
on the web browser being used.
</UL>
<LI>The <CODE>TYPE</CODE> attribute can be used to control
the shape of the bullet.
<UL>
<LI TYPE="DISC">The source code for this is 
<CODE>&lt;LI TYPE=&#34;DISC&#34;&gt;</CODE>.
<LI TYPE="SQUARE">The source code for this is
<CODE>&lt;LI TYPE=&#34;SQUARE&#34;&gt;</CODE>.
<LI TYPE="CIRCLE">The source code for this is
<CODE>&lt;LI TYPE=&#34;CIRCLE&#34;&gt;</CODE>.
</UL>
</UL>

An unordered list begins with the tag <UL> and ends with the tag </UL>. Each list item is preceded by the tag <LI>. An unordered list should be used when the order of the list items is not important.

Note : The < (less than) and > (greater than) characters have a special meaning in HTML in that they delineate tags. When you need a < or > symbol for some other reason (such as in the example above), you must use the HTML entity names < and >

Ordered List

The ordered list looks like this:

This is an ordered list.
Each list item is preceded by a letter or number, depending upon the web browser being used.
1. Again, it is possible to have a list within a list.
2. This is known as nesting.
3. Notice that the enumeration scheme at this level may be different. This depends on the web browser being used.
  - If you like, you can mix ordered and unordered lists in your nesting scheme.
  - This is an example of an unordered list nested within an ordered list which itself is nested within an ordered list.
It is possible to specify the enumeration scheme for ordered lists. The choices include Arabic numbers, upper and lower case letters, and upper and lower case Roman numbers.

This is what the source code for the preceding ordered list looks like:

<OL>
<LI>This is an ordered list.
<LI>Each list item is preceded by a <EM>letter</EM> or
<EM>number</EM>, depending upon the web browser being used.
<OL>
<LI>It is possible to have a list within a list.
<LI>This is known as <EM>nesting</EM>.
<LI>Notice that the enumeration scheme at this level may be different,
depending on the web browser being used.
<UL>
<LI>If you like, you can mix ordered and unordered lists in your nesting
scheme.
<LI>This is an example of an unordered list nested within an ordered list
which itself is nested within an ordered list.
</UL>
</OL>
<LI>It is possible to specify the enumeration scheme for ordered lists.
The choices include Arabic numbers, upper and lower case letters, and
upper and lower case Roman numbers.
</OL>

An ordered list begins with the tag <OL> and ends with the tag </OL>. Like the unordered list, each list item is preceded by the tag <LI>. An ordered list should be used when the list items should be enumerated in some manner.

Definition List

The definition list looks like this:

Term Being Defined

The definition goes here. Notice that you can use different fonts in the definition list.

Ordered List

This is a list in which the items are enumerated in some manner.

Unordered List

This is a list in which the items are not enumerated but simply listed.

Multiple Definitions

An ordered list is used in the definition.
Several definitions are listed.
Alternatively, use an unordered list.
However, notice that the indentation is different.

Another Way

Separate different definitions with the <BR> tag.
The indentation should be better.
How does it look on your browser?

Nested Definitions

Is this possible?

Sub-definition #1: It certainly is!
Sub-definition #2: The use of different fonts adds to the readability of the list.

Back to Outer List

The possibilities are endless!

This is what the source code for the preceding definition list looks like:

<DL>
<DT><STRONG>Term Being Defined</STRONG>
<DD>The definition goes here.  Notice that we can use different fonts in
the definition list.
<DT><STRONG>Ordered List</STRONG>
<DD>This is a list in which the items are enumerated in some manner.
<DT><STRONG>Unordered List</STRONG>
<DD>This is a list in which the items are not enumerated but simply
listed.
<DT><STRONG>Multiple Definitions</STRONG>
<DD>
<OL>
<LI>An ordered list is used in the definition.
<LI>Several definitions are listed.
<LI>Alternatively, use an unordered list.
<LI>However, notice that the indentation is different.
</OL>
<DT><STRONG>Another Way</STRONG>
<DD>Separate different definitions with the &lt;BR&gt; tag.<BR>
The indentation should be better.<BR>
How does it look on your browser?
<DT><STRONG>Nested Definitions</STRONG>
<DD>Is this possible?
<DL>
<DT><EM>Sub-definition #1</EM>
<DD>It certainly is!
<DT><EM>Sub-definition #2</EM>
<DD>The use of different fonts adds to the readability of the list.
</DL>
<DT><STRONG>Back to Outer List</STRONG>
<DD>The possibilities are endless!
</DL>

A definition list begins with the tag <DL> and ends with the tag </DL>. Unlike the ordered and unordered lists, each definition consists of two parts, the term being defined (which is preceded by the tag <DT>) and the definition itself (which is preceded by the tag <DD>). The term being defined is flush left and the definition is indented.

[HTML Tutorial Home Page] [Previous Page] [Next Page]