Chapter 8, Lesson 2
Chapter 8, Lesson 2![[INDEX]](icon_bki.gif){kind=icon}
Ch
8,
L
2 -
Nested Lists
If you already know how to properly "nest" lists in HTML, you can skip this lesson.
If you make a list of lists, we say that you have "nested" lists. You can do this with HTML, and it's important enough that we'll spend a lesson talking about it. It may not be immediately obvious why you would want to nest lists. But anyone who has been to junior high school has learned to do an "outline", either of a writing project or of a book. Typically, there are nested lists involved:
- Chapter 1: Meet Characters
- Mr. Doolittle (the butler)
- Mr. Runberger (the gardener)
- Mr. Havellsnitzel (the irritating brother)
- Mrs. Rankenberry (the rich old lady)
- Chapter 2: The Murder
- Mr. Runberger finds Mrs. Rankenberry's body in the garden
- Lt. Columbo arrives with homicide team
- Clues discovered
- matchbook from Tropicana Hotel
- body is clutching picture of little girl in hand
- fake suicide note
- Chapter 3: The Interviews
Here, we see that the "top" list in the nest of lists contains three "list items", Chapter 1, Chapter 2, and Chapter 3. But nested in the first item (Chapter 1) is another list, the list of 4 characters that are introduced in this chapter. When the list of characters is finished, we continue with the next item in the "top" list, which is Chapter 2, of course. We see that Chapter 2 also contains a nested list, the finding of the body, the arrival of the police, and the discovery of clues. But wait, the "clues" item includes its own nested list, which each of three clues itemized. Thus in Chapter two we have two levels of nested lists. This is a very practical example, because we often want to make lists of lists.
Here's a general form for making nested lists, using HTML (in this case, unordered lists):
<UL>
<LI> list item (for top-level list)
<UL>
<LI> list item (for nested-level list)
<LI> list item (for nested-level list)
<UL>
<LI> list item (for double-nested-level list)
<LI> list item (for double-nested-level list)
</UL>
</UL>
<LI> list item (for top-level list)
</UL>
"Nesting" can be a little confusing for those who haven't encountered it before. We've indented each list for illustration purposes, but the browser doesn't care about that one whit (remember, the browser ignores all whitespace beyond one space). So let's try to look at the above sequence like the browser does. First it encounters a <UL> tag, which says to the browser "start a list". Next the browser encounters a <LI> tag. Recognizing this as a list item, it places a bullet. It might have encountered another list item at this point, but instead it sees another opening <UL> tag, which says to the browser "start yet another list, nested here (in this item of the top list). From this point on, until it encounters either another opening <UL> tag, or until it encounters the closing </UL> tag, any <LI> tag it finds belongs to the "nested" list, not the "top" list. So when it comes across the next <LI> tag, it indents it one level further, and maybe places a different kind of bullet than the "top" level. Then when the browser encounters the closing </UL> tag, it closes out that particular level of nested list, and reverts back to the next level up.
If this seems all too confusing, don't worry about it too much, because a little hands-on practice will make it all clear as potato soup.
Let's see our "book outline" done in HTML code:
<U><B>A Sure Best-Seller</B></U>
<UL>
<LI><B>Chapter 1: Meet Characters</B>
<UL>
<LI>Mr. Doolittle (the butler)
<LI>Mr. Runberger (the gardener)
<LI>Mr. Havellsnitzel (the irritating brother)
<LI>Mrs. Rankenberry (the rich old lady)
</UL>
<LI><B>Chapter 2: The Murder</B>
<UL>
<LI>Mr. Runberger finds Mrs. Rankenberry's body in the garden
<LI>Lt. Columbo arrives with homicide team
<LI>Clues discovered
<UL>
<LI>matchbook from Tropicana Hotel
<LI>body is clutching picture of little girl in hand
<LI>fake suicide note
</UL>
</UL>
<LI><B>Chapter 3: The Interviews</B>
</UL>
A Sure Best-Seller
Let's examine our demo. First, we've indented our HTML source code so that each list (and its attendant list items) are aligned. The browser doesn't care about this alignment, but it makes our file much more readable if we have to go back later to adjust it.
Here's a hint when using nested tags: If you count the number of opening <UL> tags, you'll find they equal the number of closing </UL> tags. This should always be the case, and you should count them to make sure you've built your list correctly.
In my browser, each nested level gets a different bullet. For example, the first (top) list got solid dots, the next level list got hollow circles, and the next nested level got solid squares. This might not be the case with all browsers, as many browsers will only supply their default bullet, regardless of nesting level.
... leave e-mail ...
