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
<h2>My top three favourite movies are:</h2> <ol> <li>Star Wars</li> <li>The Matrix</li> <li>Highlander</li> </ol>
“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>
Description lists are typically used to define a series of terms. Under-utilized 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 HTML in an introductory article.
A description list consists of three tags.
<dl> starts the list itself, with the defined term enclosed inside a
<dt>. Finally, the description itself 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 description list appropriately: most browsers bold the term and indent the definition by default.
Note that description lists can be used with a far greater flexibility than the encyclopedic purpose I've used the markup for here. A list of products may be a description list; for example, to sell a book. In that 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 the description.
Also note that a description term may have multiple definitions beneath it. (Consider, for example, the multiple possible meanings of the term "haunt" in a dictionary).
Lists can be nested inside each other. Note that doing so will indent the inner nested list(s) inside the outer list. The closing tags for list items is also optional. You’ll see code examples on this blog often use this shortcut in order to save space. For example:
<h2>Things to do Today</h2> <ul> <li>Teach class <ol> <li>HTML and Web Design <li>3D Studio Max </ol> <li>Send eMails <li>Take citizenship test </ul>
Note the nesting of the first
<li> tag around the nested list. Another example:
<dl> <dt>Kiwi <dd> <ol> <li>A small flightless bird, native to New Zealand. <li>A person from New Zealand </ol> </dl>
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.