Nesting Lists in HTML
| Nested lists are lists that appear inside other lists. In HTML markup, a nested list takes the place of a list item, like so: <ol> <li>First item of the main list</li> <li>Second item of the main list</li> <li>Third item of the main list</li> <!-- Here comes the nested list --> <ol> <li>First item of the nested list</li> <li>Second item of the nested list</li> <li>Third item of the nested list</li> </ol> <!-- There went the nested list --> <li>Fourth item of the main list</li> <li>Fifth item of the main list</li> </ol> You may nest list within lists within lists if you so choose: <ul> <li>First item of the main list</li> <li>Second item of the main list</li> <li>Third item of the main list</li> <!-- Here comes the nested list --> <ul> <li>First item of the nested list</li> <li>Second item of the nested list</li> <!-- Here comes a nested list within the nested list --> <ul> <li>First item of the very nested list</li> <li>Second item of the very nested list</li> </ul> <!-- There went the nested list within the nested list --> <li>Third item of the nested list</li> </ul> <!-- There went the nested list --> <li>Fourth item of the main list</li> <li>Fifth item of the main list</li> </ul>
When you nest unordered lists, the browser typically cycles through the bullet types for each successive nested list. So, if you start the list with a disc (filled) bullet, a nested list gets the circle (hollow) bullet, a nested list within the nested list gets the square bullet, and a nested list within the nested list within the nested list gets the disc again, and so on, as Figure 52.2 shows. Figure 52.2. The browser typically cycles through the bullet types for each successive nested list in an unordered list.
|
