CIT040 Index > Nested Lists

Special Note: Nested Lists

Whenever you put a list inside another list, that is called a nested list, and you have to be very careful about how you do the markup. Consider this list of office supplies:

It’s clear that the sublist “belongs” to the second item (Paper), not to the entire list. Letter Size and Legal Size are types of paper, not types of office supplies!

Now let’s see the wrong way to write this nested list. It’s wrong because the sublist (in bold) isn’t part of the second item, which has already been ended (in the highlighted line).

<ul>
    <li>Pencils</li>
    <li>Paper</li>
        <ul>
            <li>Letter Size</li>
            <li>Legal Size</li>
        </ul>
    <li>Computers</li>
</ul>

Instead, you have to put the sublist inside the second item. This is the correct way to write it.

<ul>
    <li>Pencils</li>
    <li>Paper
        <ul>
            <li>Letter Size</li>
            <li>Legal Size</li>
        </ul>
    </li>
    <li>Computers</li>
</ul>