Back to index

Embedded Lists

Here's a sample embedded list for you to consider:

STATES:

  1. Nevada
    1. Elko
    2. Tonopah
    3. Beatty
  2. Utah
    1. St. George
    2. Hurricane
    3. Vernal
  3. Idaho
    1. Boise
    2. Lewiston
    3. Kellog

You will need to study this code very carefully. You will see the tags indented in such a way as to give you clues about its organization. Indentation is not necessary (and the browser doesn't care about indentation). You should notice that the list which contains the cities is actually inside (embedded) in the list item for the state. Consider this portion of the entire list:

<li>Idaho <ol type=i> <li>Boise</li> <li>Lewiston</li> <li>Kellog</li> </ol> </li> You should notice that the entire list which contains the cities is started and closed within the LI tags which contain Idaho.

Now let's take a look at a somewhat more complex list. This one is embedded to two levels. Study the code carefully to see how it works!

  1. South America
    1. Argentina
      1. Mendoza
      2. Santa Rosa
      3. Buenos Aires
    2. Brazil
      1. Sao Paulo
      2. Irati
      3. Rio de Janeiro
  2. Europe
    1. France
      1. Paris
      2. Bordeaux
      3. Lyon
    2. Germany
      1. Dusseldorf
      2. Munich
      3. Frankfort

Study the code for this page very carefully. You should notice three levels in this list: Continent, Country, and City. Notice also that for each different level you use a different TYPE of ordered list.
- - - - - - - - - - - - - - - - - - - - - - -
ASSIGNMENT:
You will create a list with just two levels: state and city. Your list will include ten states with five cities for each state. Using Google can be a real help if you don't happen to know the names of cities in the states you include on your list.