Lists are exactly that: lists of things. There are three forms of lists: ordered, unordered and definition lists.

Ordered Lists

Ordered lists are used when you want to make the order or importance of list items clear. For example, when writing a manual on the steps taken to defuse an atomic bomb, you wouldn’t want a simple list of bullet points. Much more appropriate would be a series of enumerated steps. (“1. Open the hatch. 2. Cut the blue wire” etc).

Ordered lists are enclosed by the <ol> tag. Each item in the list is marked with a surrounding <li> tag:

1. <h2>My top three favourite movies are:</h2>
2. <ol>
3. <li>Star Wars</li>
4. <li>The Matrix</li>
5. <li>Highlander</li>
6. </ol>

Unordered Lists

“Unordered” in the context of XHTML doesn’t mean that the list items are randomly sorted on the web page: it simply implies that it doesn’t matter which order the viewer reads them in. An unordered list begins with the <ul> tag. Items nested inside this tag are still marked as <li> (list items).

1. <h2>My hobbies are:</h2>
2. <ul>
3. <li>Scuba-diving</li>
4. <li>Woodworking</li>
5. <li>Writing</li>
6. <li>Movies</li>
7. </ul>

Definition lists

Definition lists are typically used to define a series of terms. Under-utilised in web design, they are appropriate whenever you are seeking to make terms very, very clear, such as a legal document or a handbook. You can see a use of a definition list at the very start of this XHTML course, when I define what XHTML stands for.

A definition list consists of three tags. <dl> starts the definition list itself. The defined term is enclosed inside a <dt>. Finally, the definition itself (the definition declaration) is enclosed inside a <dd> tag. For example:

1. <dl>
2. <dt>Kiwi</dt>
3. <dd>A small flightless bird, native to New Zealand.</dd>
4. </dl>

The browser will present the definition list appropriately: by default, with the term in bold text and the definition indented.

Note that the definition list can be used with a far greater flexibility than the encyclopedic purpose for which we've used it here. A list of products may be a definition list; I have used a definition list (with nested forms of other lists) in the course outline pages in the recommended books section. In that case, the title and a picture of the book are the definition term, while further details and an explanation of the book's purpose is a definition declaration.

Also note that a definition term may have multiple definition declarations beneath it. (Consider, for example, the multiple possible meanings of the term "haunt" in a dictionary).

Nested Lists

Lists can be nested inside each other. Note that doing so will indent the inner nested list(s) inside the outer list. For example:

1. <h2>Things to do Today</h2>
2. <ul>
3. <li>Teach class
4. <ol>
5. <li>HTML and Web Design</li>
6. <li>3D Studio Max</li>
7. </ol></li>
8. <li>Send faxes</li>
9. <li>Take citizenship test</li>
10. </ul>

Note the nesting of the first <li> tag around the nested list. Another example:

1. <dl>
2. <dt>Kiwi</dt>
3. <dd>
4. <ol>
5. <li>A small flightless bird, native to New Zealand.</li>
6. <li>A person from New Zealand
7. <em>(informal)</em></li>
8. </ol>
9. </dd>
10. </dl>

There are many ways of customising the appearance of lists, all of them the role of CSS, which we shall get to shortly.