Types of Lists

Examples of Lists

Descriptive List
Unordered List
Ordered List
Nested Lists
Menu and Directory Lists
Known List Differences Between Netscape and Microsoft Explorer

Descriptive List

The basic structure of the elements in a descriptive list is as follows:


<dl> (start descriptive list)
   <lh>      </lh> (optional list header)
   <dt>      </dt> (item name; optional end tag)
      <dd>      </dd> (item description; optional end tag)
</dl> (end descriptive list)

Descriptive List Example

First item: Description of first item.
Second item: Description of second item.
Third item: Description of third item.

Unordered List

The basic structure for an unordered list is as follows:


<ul> (start unordered list)
   <lh>      </lh> (optional list header)
   <li>      </li>  (list item; optional end tag)
</ul> (end unordered list)

Unordered List Example

This is the optional header for an unordered list

First item
Second item
Third item

Unordered List Example Without Using <ul> and </ul> Tags
In Netscape 2.0 (this does not work with Microsoft Expolorer) you can create a bulleted list just by using the <li> tag:

First item

Second item

Third item
You will need to include a line break (<br>) or paragraph tag (<p>) to end the last item in the list. (The end list item tag, </li>, will not do it.) Notice that the list of bulleted items is not indented, unlike when the unordered list tags are used. Also, for multi-line items the text in the second and following lines is not indented.

Ordered List

The basic structure for an ordered list is as follows:


<ol> (start ordered list)
   <lh>      </lh> (optional list header)
   <li>      </li> (list item; optional end tag)
</ol> (end ordered list)

Ordered List Example (without header)

First item
Second item
Third item

Changing Numeric Format in an Ordered List Example
By default an ordered list is displayed in numeric format (i.e., 1, 2, 3 . . .). With Netscape 2.0, the format can be changed by starting the list with the following tags:

<ol type=I, II, III. . .> changes format to large Roman numerals
<ol type=i, ii, iii. . .> changes format to small Roman numerals
<ol type=A, B, C. . .> changes format to uppercase letters
<ol type=a, b, c. . .> changes format to lowercase letters

Regardless of the format of the numbering, ordered lists end with the </ol> tag. For example,

First main item
1. First secondary item
2. Second secondary item
  1. First secondary sub-item
  2. Second secondary sub-item
Second main item

Nested Lists

In nesting lists, one simply inserts the structure for one list within the structure for another list. The key in constructing nested lists is to remember to end the lists in the opposite order in which they were started. (This is even more important when the nested lists are not of the same type.) For example, the basic structure for a nested unordered list (without headers) is as follows:


<ul> (start of main list)
   <li> (first main list item)
   <li> (second main list item)
   <ul> (start of nested list)
      <li> (first nested list item)
      <li> (second nested list item)
   </ul> (end of nested list)
   <li> (second main list item)
</ul> (end of main list)

Nested Unordered List Example (without headers)

First main item
- First secondary item
- Second secondary item
Second main item
- First secondary item
- Second secondary item
  - First secondary sub-item
  - Second secondary sub-item
Third main item

Some things to note about using nested lists:

The shape of the bullets in nested unordered lists changes at each level, regardless of the type of the primary list (at least in Netscape).
The different bullet shapes are not necessarily the same with different browers or even different computers using the same browser (which is mostly a function of the computer's graphics capabilities).
Also note that in the above example the list nested under the First main item had to be ended before moving on to the Second main item and its nested list.
When nesting ordered lists, each level with have the default number format unless it is changed using the type= option.

Different Nested Lists Example (without headers)

First numbered item
- First unordered item
- Second unordered item
Second numbered item
1. First ordered sub-item
2. Second ordered sub-item
Third numbered item

For the above example I nested both an unordered list and an ordered list within the primary ordered list. I also changed the format of the nested ordered list by using the tag
<ol type=a, b, c. . .> to start the list.

Menu and Directory Lists

As noted in the main page, under Netscape menu and directory lists appear as unordered lists. The structure for these two lists is the same as for unordered lists, except that a menu list uses the tags <menu> and </menu> and the directory list uses the tags <dir> and </dir>. Just in case these lists appear differently with other browsers, here is an example of each.

Menu List Example

First main item

First secondary item

Second secondary item

Second main item

Directory List Example

First main item

First secondary item

Second secondary item

Second main item

Known Lists Differences Between Netscape and Microsoft Explorer

I haven't made a thorough examination of all the differences in the way the two browsers display lists, but here are some items that I noticed in creating this page.

The menu list works under MS Explorer, which means there are no bullets.
The directory list appears just like the menu list under MS Explorer (again, no bullets).
Under MS Explorer the bullets are the same for all levels of nested unordered lists.
MS Explorer did not recognize the end of the optional list header as the end of a line and I had to insert the <br> tag.
Ms Explorer does recognize the alternate numbering formats for ordered lists.
Netscape 2.0 will allow you to create a bulleted list with just the <li> tags. Microsoft Explorer wil not.

Return to webtips page.