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 HTML 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 when I define what XHTML stands for in an introductory article.

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 often used a definition list (with nested forms of other lists) in the recommended books section. In those cases, 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 customizing the appearance of lists, almost all of them the role of CSS, although some aspects, such as reversing or restarting list number sequences, are the province of HTML.