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>
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:
<dd>A small flightless bird, native to New Zealand.</dd>
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).
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.