Websites have used lists for decades to convey related or hierarchical information. In the following figure, you can see an older version of Yahoo.com that uses bulleted lists to display various categories and today’s Allrecipes.com recipe page, which uses lists to display various ingredients.

Lists begin with a symbol, an indentation, and then the list item. The symbol used can be a number, letter, bullet, or no symbol at all.

Creating ordered and unordered lists

The two most popular types of lists are:

• Ordered: Ordered lists are numerical or alphabetical lists in which the sequence of list items is important.

• Unordered: These lists are usually bulleted lists in which the sequence of list items has no importance.

You create lists by specifying the type of list as ordered or unordered, and then adding each list item using the li tag, as shown in the following steps:

1. Specify the type of list.

   Add opening and closing list tags that specify either an ordered (ol) or unordered (ul) list, as follows:

   • ol to specify the beginning and end of an ordered list.

   • ul to specify the beginning and end of an unordered list.

2. Add an opening and closing tag (that is,

and
) for each item in the list.

For example, here’s an ordered list:

<ol>
   <li> List item #1 </li>
   <li> List item #2 </li>
   <li> List item #3 </li>
</ol>

Nesting lists

Additionally, you can nest lists within lists. A list of any type can be nested inside another list; to nest a list, replace the list item tag

with a list type tag, either

or

.

The example code here shows various lists types including a nested list.

The page produced by the code is shown here:

The

tag shown in this code sample is not necessary to create a list. It's used here only to name each list.

Every opening list or list item tag must be followed with a closing list or list item tag.