The Basic XHTML Tag Set: List Tags
Another set of block-level tags is the list tags. XHTML 1.0 Strict has three different kinds of lists: ordered (numbered) lists, unordered (bulleted) lists, and the less-commonly-used definition lists.
The List Item (<li>)
Regardless of the type of list an item appears in, it must be marked up as a list item, e.g., between <li> tags. Conveniently, if you should happen to switch from an ordered to an unordered list, the individual items do not need to be marked up.
The Ordered (Numbered) List (<ol>)
Ordered lists automatically number list items for you. They're helpful for lists in which the enumeration or order of things is rhetorically important. E.g., if we were making a list of the steps for a recipe, our ordered list might be marked up like this:
<ol>
<li>Measure dry ingredients.</li>
<li>Cream butter and sugar.</li>
<li>Add dry ingredients to butter and sugar.</li>
</ol>
And that markup would look something like this when displayed in a browser:
- Measure dry ingredients.
- Cream butter and sugar.
- Add dry ingredients to butter and sugar.
What's nice about this is that we don't have to write the numbers in the markup. So if we decide to add a new item to the list, either at the top, somewhere in the middle, or at the bottom, the list gets renumbered, and we can get on with the important task of writing more cookie recipes. Or whatever.
The Unordered (Bulleted) List (<ul>)
Unordered lists are useful in a variety of situations, like listing points that may not have an order of importance (though certainly most readers will look for some kind of order), or that share importance. For example, someone might have a list of software skills in her resume:
<ul>
<li>Microsoft Office</li>
<li>Adobe PhotoShop</li>
<li>Macromedia Dreamweaver</li>
</ul>
Which might look something like this:
- Microsoft Office
- Adobe Creative Suite
- Macromedia Dreamweaver
Nesting Lists
Of course, many of us who use lists in our documents are used to have lists, and then sublists within the lists. For example, our fictional resume-writer might want to have a sub-list of the individual pieces of software within larger packages like Microsoft Office. So her resume markup would look like this:
<ul>
<li>Microsoft Office
<ul>
<li>Microsoft Word</li>
<li>Microsoft Excel</li>
<li>Microsoft PowerPoint</li>
</ul>
</li>
<li>Adobe Photoshop</li>
<li>Macromedia Dreamweaver</li>
</ul>
Notice how a complete unordered list gets nested within the Microsoft Office list item. This is the standard way to do nested lists, resulting in something that might look like this:
- Microsoft Office
- Microsoft Word
- Microsoft Excel
- Microsoft PowerPoint
- Adobe PhotoShop
- Macromedia Dreamweaver
Although this may look confusing, it might help think of it this way: sub-lists are part of the list item that contains the sublist, not separate list items (in the top-level list) all their own.
Updated on Mon. Feb. 20 2006 at 12:10AM