HTML Tutorial: Lists

HTML supports two basic list types; ordered and unordered. The ordered list is designed to display lists with prioritized content, such as a list of steps in a process. The unordered list is for lists where the order is less important.

All lists consist of two major elements, the List definition, which conists of an opening and a closing list tag, and the List elements, which are the individual items in the list to be displayed. Closing tags are required for both the list items and the list definitons.

Ordered Lists

The Ordered List is defined by the <OL> tag. There are five different types of ordered lists, depending on the list indication. The available ordered list types are:

To indicate the list type you want, add the type attribute to the the opening list tag, as shown in this example:

<OL type="A">

The complete code for an ordered list would look similar to this:

<OL type="1">
<li>List Item One</li>
<li>List Item Two>/li>
<li>List Item Three>/li>
</OL>

The code above would create a list that looks like this:

  1. List Item One
  2. List Item Two
  3. List Item Three

Unordered Lists

The Unordered List is similar to the Ordered List, with the exception that there is no specific order required in the contents. The unordered list elements are preceded by a bullet instead of an increasing value element. There are several types of bullets that you can use:

If you don't indicate a specific bullet types, it will default to the circle.

The source for a simple unordered list could look like this:

<UL type="square">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>

And would produce a list that looked like this:

Nested Lists

Putting a list inside another list is called nesting. Creating nested lists is as simple as putting the code for one list inside the <li> section of the outside list, similar to the following example:

<UL type="disc">
<li>List Item</li>
<li>
Nested List
  <OL type="1">
  <li>First Nested Item</li>
  <li>Second Nested Item</li>
  <li>Third Nested Item</li>
  </OL>
</li>
<li>List Item</li>
</UL>

The example above would create the following nested list.