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:
- <h2>My top three favourite movies are:</h2>
- <ol>
- <li>Star Wars</li>
- <li>The Matrix</li>
- <li>Highlander</li>
- </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).
- <h2>My hobbies are:</h2>
- <ul>
- <li>Scuba-diving</li>
- <li>Woodworking</li>
- <li>Writing</li>
- <li>Movies</li>
- </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:
- <dl>
- <dt>Kiwi</dt>
- <dd>A small flightless bird, native to New Zealand.</dd>
- </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:
- <h2>Things to do Today</h2>
- <ul>
- <li>Teach class
- <ol>
- <li>HTML and Web Design</li>
- <li>3D Studio Max</li>
- </ol></li>
- <li>Send faxes</li>
- <li>Take citizenship test</li>
- </ul>
Note the nesting of the first <li> tag around the nested list. Another example:
- <dl>
- <dt>Kiwi</dt>
- <dd>
- <ol>
- <li>A small flightless bird, native to New Zealand.</li>
- <li>A person from New Zealand
- <em>(informal)</em></li>
- </ol>
- </dd>
- </dl>
There are many ways of customising the appearance of lists, all of them the role of CSS, which we shall get to shortly.
Haha, that is actually incredibly clever.
![Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy] Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]](http://ecx.images-amazon.com/images/I/5192I1rtYnL._SL160_.jpg)

