The HTML Pocket Guide: Lists
This chapter is from the book
This chapter is from the book
This chapter is from the book
Lists are one of the most commonly used semantic elements across the Web. This is particularly true of unordered lists, which are ubiquitous as the choice for marking up navigation and many other groups of links.
Before I explain each list-related element, I'll discuss a capability that is common to all lists: nesting.
Nested Lists
Lists can be nested within other lists, as shown in the following example that details a sequenced plan to relocate. In this case, it's an ordered list inside another one, though you can nest any type of list within any other type (see the dl entry in this chapter for a related note).
<ol>
<li>Take an Italian Berlitz course.</li>
<li>Move to Italy.
<!-- Start nested list -->
<ol>
<li>Have a yard sale.</li>
<li>Pack what's left.</li>
<li>Ship boxes.</li>
<li>Jump on plane.</li>
</ol>
<!-- end nested list -->
</li><!-- close list item containing nested list -->
<li>Say “Ciao!” upon landing.</li>
</ol>
This displays by default in most user agents as shown here:
- Take an Italian Berlitz course.
- Move to Italy.
- Have a yard sale.
- Pack what's left.
- Ship boxes.
- Jump on plane.
- Say "Ciao!" upon landing.
There's one simple but important rule to follow when nesting lists: You must insert the nested list inside an li element (or dd element in the case of a definition list) of the parent list. That is, putting the list alongside a parent li or dd is invalid.
Also, although this example shows only one level of nesting, you can also nest a list inside a nested list (and another inside that one, ad infinitum). For example, I could nest an unordered list (a ul, as you'll recall) in the "Pack what's left" li to list all items to pack, irrespective of packing order.