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 (Envelopes), not to the entire list. Standard and Catalog are types of envelopes, not types of office supplies.

Here is 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>Envelopes</li>
        <ul>
            <li>Standard</li>
            <li>Catalog</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>Envelopes
        <ul>
            <li>Standard</li>
            <li>Catalog</li>
        </ul>
    </li>
    <li>Computers</li>
</ul>