Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
Fancy Lists
Compact lists
Nesting lists
Unordered types
Ordered types
Start numbers
Putting it together
You Try It!
Forms
Advanced Tables
Frames
Style Sheets
Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices
|
One thing useful to do with lists is to nest them. This means you can put a list inside of a list. You must be careful when doing this, especially to make sure every opening tag has a closing tag. Let's start by putting a numbered list of plants inside an unnumbered list of living things. I've put in some extra spaces so it's easier to read, but the computer treats it like all the code is on a single line.
| Code |
|---|
<ul>
<li>Animals</li>
<li>Plants
<ol>
<li>Parsnips</li>
<li>Radishes</li>
<li>Zucchini</li>
</ol>
</li>
<li>Fungus</li>
</ul>
|
|
| What you see |
- Animals
- Plants
- Parsnips
- Radishes
- Zucchini
- Fungus
|
|
Note that the new list falls between the <li> and the </li> tags in the list above it. That is because the nested list is part of an item in the bigger list. It's logical if you thing about it a bit. By the way, isn't thsi starting to look more like an outline?
You can put numbered lists inside of numbered lists, unordered lists inside of unordered, or any combination you'd like. How many will nest together? Good question. Probably infinite, but because each list indents a little, you wouldn't want to go more than three or four deep. Here's the same principle, slightly extended:
| Code |
|---|
<ul>
<li>Animals
<ol>
<li>Mammals
<ol>
<li>Lorises</li>
<li>Tapirs</li>
<li>Bigfoot</li>
</ol>
</li>
<li>Everything else</li>
</ol>
</li>
<li>Plants
<ol>
<li>Parsnips</li>
<li>Radishes</li>
<li>Zucchini</li>
</ol>
</li>
<li>Fungus</li>
</ul>
|
|
| What you see |
- Animals
- Mammals
- Lorises
- Tapirs
- Bigfoot
- Everything else
- Plants
- Parsnips
- Radishes
- Zucchini
- Fungus
|
|
This is a good way to organize information, and I highly recommend using it.
|
