Ðriver70's List Page

How to make lists using HTML

There are several ways to make a list using HTML. This page will give you the basic knowledge that you will need to make these useful tools.

Note: The use of a closing </li> is not at this time required in HTML4, but with XHTML and most likely future HTML standards it will be required. I haven't had time to update this page, but it would be a good idea for you to close the Line Item tags.

Types of Lists

Unordered List (Bullet List)
Ordered List (Numbered List)
Definition List

The first two types of lists to deal with have two parts to each list.
First is the list type tag (<ul> or <ol>), then the line item tag (<li>).

Unordered list <ul>

This is the simplest list in HTML, and is the list seen above.
Here I show you how that was made, and a few tricks to go with it.

Fruits

Apple
Orange
Pear
Grapefruit

This list was made with this code.

<ul>
<h3>Fruits</h3>
   <li>Apple
   <li>Orange
   <li>Pear
   <li>Grapefruit
</ul>

Note: You can nest more than one unordered list together, like this.

Fruits

Apple
- Red Apples
- Green Apples
Orange
Pear
Grapefruit

The above list is made like this, and notice that there is another list in the middle of the main list.

<ul>
<h3>Fruits
<li>Apple
    <ul>
    <li>Red Apples
<li>Green Apples
    </ul>
<li>Orange
<li>Pear
<li>Grapefruit
</ul>

Unordered list attributes

These attributes can be used in the unordered list tag to control the style of list, and part of the <ul> tag. They are as follows.

Notice: <ul type=circle> looks like a small letter O on most browsers, but on WebTV it looks like a small arrow €

NEW On my WebTV Plus with the 2.6.1 upgrade, I now see the circle attribute as it should be seen.

<ul type=disc>

<ul type=square>

<ul type=circle>

Ordered List <ol>

This can be used if you would like to number your list. The only difference is the opening and closing list tag. You will use "ol" instead of "ul"

Fruits

Apple
Orange
Pear
Grapefruit

You can also nest an unordered list in this one as well.

Fruits

Apple
- Red Apples
- Green Apples
Orange
Pear
Grapefruit

The code for the above list is as follows.

<ol>
<h3>Fruits</h3>
<li>Apple
    <ul>
    <li>Red Apples
    <li>Green Apples
    </ul>
<li>Orange
<li>Pear
<li>Grapefruit
</ol>

Ordered list attributes

Ordered lists can use more than numbers to start each line item, and are as follows.

<ol type=1> Numbered list
Line 2

<ol type=A> Upper case list
Line 2

<ol type=a> Lower case list
Line 2

<ol type=I> Roman numeral list (Upper case)
Line 2

<ol type=i> Roman numeral list (Lower case)
Line 2

Definition List <dl>

This type of list is different from the other lists because each item has two parts, a term and a definition. This can also be used to list links with a description of the link below.

Apple: A firm fruit that can be either red or green, some are sweet and others are tart.
Orange: A round, orange fruit with a non-edible skin that must be removed before eating. Some have seeds but others do not.
Pear: A strange shaped fruit that is usually green or yellow. Most pears are very sweet.
Grapefruit: Another round citrus fruit, much like the orange, but yellow in color and not as sweet.

Definition List

A definition list looks like this.

<dl><h3>Fruits</h3>

<dt>Apple
<dd>A firm fruit that can be either red or green, some are sweet and others are tart.

<dt>Orange
<dd>A round, orange fruit with a non-edible skin that must be removed before eating. Some have seeds but others do not.

<dt>Pear
<dd>A strange shaped fruit that is usually green or yellow. Most pears are very sweet.

<dt>Grapefruit
<dd>Another round citrus fruit, much like the orange, but yellow in color and not as sweet.

</dl>