Sometimes, you'll want to create outlines or other kinds of complex data in your HTML5 pages. You can easily nest lists inside each other, if you want. You can see a more complex list describing popular cat names in the U.S. and Australia.
This example uses a combination of lists to do its work. This contains a list of two countries: the U.S. and Australia. Each country has an H3 heading and another (ordered) list inside it. You can nest various elements inside a list, but you have to do it carefully if you want the page to validate.
In this example, there's an unordered list with only two elements. Each of these elements contains an heading and an ordered list. The page handles all this data in a relatively clean way and validates correctly.
The nested list example
The entire code for nestedList.html is reproduced here:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nestedList.html</title> </head> <body> <h1>Nested Lists</h1> <h2 id="tab2" >Popular Cat Names</h2> <ul> <li> <h3>USA</h3> <ol> <li>Tigger</li> <li>Tiger</li> <li>Max</li> <li>Smokey</li> <li>Sam</li> </ol> </li> <li> <h3>Australia</h3> <ol> <li>Oscar</li> <li>Max</li> <li>Tiger</li> <li>Sam</li> <li>Misty</li> </ol> </li> </ul> </body> </html>
Here are a few things you might notice in this code listing:
There’s a large
The main list has only two list items.
Each of these items represents a country.
Each country has an element, describing the country name inside the .
Each country also has an
The indentation really helps you see how things are connected.
How to indent your code
You might have noticed that HTML code is usually indented. The browsers ignore all indentation, but it's still an important coding habit.
There are many opinions about how code should be formatted, but the standard format will serve you well until you develop your own style.
Generally, the following rules are applied to indent HTML code:
Indent each nested element. Because the tag is inside the element, you can indent to indicate this. Likewise, the elements are always indented inside
Line up your elements. If an element takes up more than one line, line up the ending tag with the beginning tag. This way, you know what ends what.
Use spaces, not tabs. The tab character often causes problems in source code. Different editors format tabs differently, and a mixture of tabs and spaces can make your carefully formatted page look awful when you view it in another editor.
Most editors have the ability to interpret the tab key as spaces. It's a great idea to find this feature on your editor and turn it on, so any time you hit the tab key, it's interpreted as spaces. In Komodo Edit, you do this in Edit ➪ Preferences ➪ Editor ➪ Indentation.
Use two spaces. Most coders use two or four spaces per indentation level. HTML elements can be nested pretty deeply. Going seven or eight layers deep is common. If you use tabs or too many spaces, you'll have so much white space that you can't see the code.
End at the left margin. If you finish the page and you're not back at the left margin, you've forgotten to end something. Proper indentation makes seeing your page organization easy. Each element should line up with its closing tag.
How to build a nested list
When you look over the code for the nested list, it can look intimidating, but it isn't really that hard. The secret is to build the list outside in:
Create the outer list first.
Build the primary list (whether it's ordered or unordered). In the example, there was originally just the unordered list with the two countries in it.
Add list items to the outer list.
If you want text or headlines in the larger list, you can put them here. If you're putting nothing but a list inside your primary list, you may want to put some placeholder tags in there just so you can be sure everything's working.
Validate before adding the next list level.
Nested lists can confuse the validator (and you). Validate your code with the outer list to make sure there are no problems before you add inner lists.
Add the first inner list.
After you know the basic structure is okay, add the first interior list. For the example, this was the ordered list of cat names in the U.S.
Repeat until finished.
Keep adding lists until your page looks right.
Validate frequently.
It's much better to validate as you go than to wait until everything's finished. Catch your mistakes early so you don't replicate them.
