Help:Wiki University HTML-- Nesting Lists

{| style="width:100%; margin-bottom:-10px; " << Previous Chapter Next Chapter >>

Nesting Lists
Many times you need to break down individual items in a list. If you had a list of fruits like this: You might want to include some different varieties for each fruit mentioned. If you wanted to state the kinds of apples, for example: Granny Smith, Golden Delicious and Red Delicious, you would nest a list between apples and pears like so:
 * Apples
 * Pears
 * Cherries
 * Oranges


 * Apples
 * Granny Smith
 * Golden Delicious
 * Red Delicious
 * Pears
 * Cherries
 * Oranges

You can even nest lists inside of nested lists by using more asterisks.
 * NOTICE each variety is on a separate line.
 * NOTICE each item on the nested lists is indented.

Creating Unordered Nested Lists
 
 * Apples
 * 
 * Granny Smith
 * Golden Delicious
 * Red Delicious
 * 
 * Pears
 * Charries
 * Oranges</li>

</ul> (The HTML code was indented to make studying the code a bit easier.) Here how the nested list looks on the page:  Apples</li>  Granny Smith</li> Golden Delicious</li> Red Delicious</li> </ul> Pears</li> Charries</li> Oranges</li> </ul> You can even nest lists inside of nested lists by placing the new nest of items inside a pair of  tags.
 * NOTICE that the "nested list" is enclosed with its own pair of  opening and closing tags shown in red . This is important.  Study this carefully.
 * NOTICE each variety is on a separate line.
 * NOTICE each item on the nested lists is indented.

Creating Ordered Nested Lists
Creating ordered nested lists works in the same way as unordered lists. Just substitute <ol> for  tags. You can nest ordered lists inside of other ordered nested lists, but they will all have numbers instead of letters or roman numerals. You cannot nest ordered lists inside unordered lists and vice versa.

HTML and Wikitext
As you can see, Wikitext is simpler to use, but again you have no way to make changes to the formatting of these nested lists.

Try these out


<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises


 * To practice nesting unordered lists, in your sandbox create a list with the following items: Fruits, Vegetables, Nuts and Grains. In between each item list three varieties.
 * To practice nesting ordered lists, in your sandbox create an ordered list with the following items: North American, United States of America, State of Missouri and Jackson County. In between each item list three items that apply.

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * If you were nesting a list of states in a list of countries, which list would you use?:
 * A. Ordered List
 * B. Unordered List


 * If you were nesting a list of states by size in a list of countries by size, which lists would you use?
 * A. Ordered List
 * B. Unordered List

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers