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>
“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>
Description lists (called definition lists in XHTML) 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 XHTML in an introductory article.
A descrption 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:
<dd>A small flightless bird, native to New Zealand.</dd>
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 for which I've used it 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. For example:
<h2>Things to do Today</h2>
<li>HTML and Web Design</li>
<li>3D Studio Max</li>
<li>Take citizenship test</li>
Note the nesting of the first
<li> tag around the nested list. Another example:
<li>A small flightless bird, native to New Zealand.</li>
<li>A person from New Zealand
Changes In HTML5
In HTML5, closing tags for list items are optional. That is,
</dd> may be dropped. You’ll see code examples in this blog often use this shortcut in order to save space.