Lists of Lists

You might wonder if it is possible for a list item to be a list. For example:

• Reds
  • red
  • pink
  • hotpink
  • lightpink
• Oranges
  • orange
  • orangered
• Yellows
  • yellow
  • goldenrod
  • darkgoldenrod
• Greens
  • green
  • lawngreen
  • lightseagreen

It is possible, although it can get confusing to do. (But it is typical computer science idea and good practice.) Examine the outer structure of the above list:

  

  Reds
  
  

  Oranges
  
  

  Yellows
  
  

  Greens
  
 
 


<ul>
  <li>
  Reds
  </li>

  <li>
  Oranges
  </li>

  <li>
  Yellows
  </li>

  <li>
  Greens
  </li> 
</ul> 

(For clarity, the HTML has been indented and tags have been placed one per line. This works fine, but the browser doesn't need it done this way.) Now let us put a list into the "Red" list item. To do so, change this:

  <li>
  Reds
  </li>

to this:

  <li>
  Reds
    <ul>
    <li>red</li>
    <li>pink</li>
    <li>hotpink</li>
    <li>lightpink</li>
    </ul>
  </li>

All we have done is to make a complete list part of a List Item (which is bracketed by <li> and </li>). Here is what it looks like in context:

Reds
    

    
red
    
pink
    
hotpink
    
lightpink
    

  

  Oranges
  
  

  Yellows
  
  

  Greens
  
 
 


<ul>
  <li>
  Reds
    <ul>
    <li>red</li>
    <li>pink</li>
    <li>hotpink</li>
    <li>lightpink</li>
    </ul>
  </li>

  <li>
  Oranges
  </li>

  <li>
  Yellows
  </li>

  <li>
  Greens
  </li> 
</ul>