Nested Lists

While it is not encountered all the time, any web developer who has worked very long will encounter a need for nested lists – that is a list within a list, or what is sometimes called a sub-list.

Nested lists allow for you to better organize groups of related items. Consider a packing list for a shelf unit you might have bought. As you go through the list of items you were supposed to get, you see shelves, sides, fasteners of different types and sizes, and a few other items most likely. You could list each item individually, or you could group things together.

For example, often the top, bottom, and middle shelves are slightly different, and not interchangeable. Therefore you could list shelves, and then specify the different types. The same could be done with different types and sizes of fasteners, which would look like this:

<ul>
    <li>Sideboard - 2</li>
    <li>Shelves
        <ul>
            <li>Top - 1
            <li>Bottom - 1
            <li>Middle Fixed Shelf - 1
            <li>Middle Shelves - 3
        </ul>
    </li>
    <li>Fasteners
        <ul>
            <li>Nails - 32
            <li>Screws
                <ul>
                    <li>1 3/4” screws - 16
                    <li>2 1/2” screws - 8
                </ul>
        </ul>
</ul>

The result of this code would look something like the following.

• Sideboard – 2
• Shelves
  • Top – 1
  • Bottom – 1
  • Middle Fixed Shelf – 1
  • Middle Shelves – 3
• Fasteners
  • Nails – 32
  • Screws
    • 1 3/4” screws – 16
    • 2 1/2” screws – 8

Notice how the list style changes as you nest your list.

Nested Lists was originally found on Access 2 Learn