Help:Wiki University HTML-- Nesting Lists





<< 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
 * Cherries</li>
 * Oranges</li>

</ul> (The HTML code was indented to make studying the code a bit easier.) Heres how the nested list looks on the page:  Apples</li>  Granny Smith</li> Golden Delicious</li> Red Delicious</li> </ul> Pears</li> Cherries</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

<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
 * Using HTML code 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.

<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 no particular order 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

<< Previous Chapter Next Chapter >>