Recently I was debugging a problem on a site I’m developing. As it turns out the issue dealt with a script I was using for the site navigation, which was an unordered list of links for the pages of the site. The list contained nested lists that were links for sub-sections of the site. Unable to come up with a quick fix on my own after going through my code, I turned to a web development technical forum for assistance. After the first response, I found myself wishing I had spent a little more time looking for the answer on my own.

The first person to respond looked through the code, and advised me that the error on the page was due to how I structured the list for the navigation. I was told that having a list inside another list was not possible, and the code was invalid. Initially I started wondering how I had never caught this obvious error before, and wondered how I had made it 10 years building websites without knowing the basics of how lists work. Then I came to my senses, but not before wasting a few more minutes verifying that you can in fact construct nested lists. I turned to w3schools, where they even provide examples of how to build nested lists.

I found myself giving a development lesson to the person who first responded to my inquiry before continuing the search for what was actually wrong with my site. For those new to the world of web development, and even for the seasoned coders who may need a refresher course in the basics every once in a while, I thought I’d give an explanation of a nested list here.

Lists: The Basics

There are two main types of lists: unordered and ordered. An unordered list by default displays items as a bulleted list. Obviously, the order of the items in the list doesn’t matter. The html code to start an unordered list is <ul>, and the list is closed with </ul>. An ordered list by default displays items as a numbered list, used where (you guessed it) the order of the items in the list does matter. The html code to start an ordered list is <ol>, and the list is closed with </ol>. The actual items for the list are enclosed between <li> and <li>.

There is actually a third type of list, called a definition list. The code to open and close this type of list is <dl> and <dl>. I’ve never used this type of list, and chances are you won’t either.

Easy enough. Let’s say you wanted to make a simple unordered list of a few different operating systems for mobile phones.

<ul>
    <li>Android</li>
    <li>iOS</li>
</ul>

For an ordered list, it would look the same as above, using <ol> and </ol> instead, and you’d end up with numbers instead of bullets. As with any html code, remember that each tag should be closed.

Lists: Nested

What if you wanted to provide more details in your list? Take the simple list above for example. We’ve listed different types of operating systems. What if you want to list a few different devices that use each of the operating systems? With nested lists, you can organize all the content within one main unordered list. You would start your list like normal, using the <ul> tag to specify that you’re building an unordered list, and start your list item with the <li> tag and then enter your text. To nest a sub-list for this item, you won’t close it out with </li> just yet. Instead you’ll start a new unordered list, coding in each list item for it, and close the sub-list out. Then you’ll close out the initial list item tag. See below:

01| <ul>
02|     <li>Android
03|         <ul>
04|             <li>Motorola Droid X</li>
05|             <li>HTC Droid Incredible</li>
06|             <li>HTC Evo 4G</li>
07|         </ul>
08|     </li>
09|     <li>iOS
10|        <ul>
11|            <li>iPhone 4</li>
12|            <li>iPhone 3GS</li>
13|            <li>iPad</li>
14|        </ul>
15|    </li>
16| </ul>

On line 2, the li tag isn’t closed after “Android”. Underneath, a new list is started and the 3 Android phones are entered. That list is then closed, and the li tag for Android isn’t actually closed out until line 8. Indenting your code can be a big help in finding where a particular tag starts and finishes.

As you can see, nested lists aren’t difficult to build. This is just a simple breakdown of of how to properly code them, with most of the pointers I gave to a forum member that responded to me with incorrect information. If it can be helpful to one person, it can probably help a few others out there as well.

Beyond the Basics

Lists are an extremely useful tool to use in website development. Styled with CSS, many sites depend on lists for their navigation. There are many different methods to do so, and Smashing Magazine has a great article that highlights a few of the more popular techniques.