H T M L   1 0 1 - NESTED LISTS

Ordered Lists and Unordered lists can have different levels; each will be indented appropriately by your web browser. Your major concern will be to verify that each list is properly terminated and the nesting order is correct.

It can start to look complicated with all of those <ol> <li> </ul> <li> tags floating around, but just try to remember the basic structure:

      <ul>            <ol>
          <li>           <li>
          <li>           <li>
      </ul>           </ol>
              

Here is an example of an unordered list with sublevels of other lists:

• This is the first item
• This is the second item
  • This is the first subitem of the second item
    • And this is a subitem of a subitem
    • Getting lost yet?
  • This is the second subitem of the second item
  • This is the third subitem of the second item
• This is the third item

Note how the bullet marks change for different levels of the list.

And this is the HTML format for producing this format:

  <B>Nested Unordered List</B>
  <ul>
     <li>This is the first item</li>
     <li>This is the second item</li>
     <ul>
       <li> This is the first subitem of the second item</li>
       <ul>
         <li> And this is a subitem of a subitem</li>
         <li> Getting lost yet?</li>
       </ul>
       <li> This is the second subitem of the second item</li>
       <li> This is the third subitem of the second item</li>
       </ul>
     <li>This is the third item</li>
  </ul>
              

Nested Lists -- Mixing them together

Not only can you include ordered lists within ordered lists, but you can also mix and match list types. Hold onto your hats! The HTML starts to look pretty ugly, but watch how lists completely contain other lists.

For example, this ordered list includes a nested unordered list:

And this is the HTML format for producing this format. Note how the HTML has been indented to make it easier to read:

<B>Nested Unordered List</B>
     <ol>
        <li>This is the first item
        <li>This is the second item
           <ul>
           <li> This is the first subitem of the second item
              <ol>
              <li> And this is a numbered subitem of a subitem
              <li> And this is another numbered subitem of a subitem
              <li> Getting lost yet?
              </ol>
           <li> This is the second subitem of the second item
           <li> This is the third subitem of the second item
           </ul>
        <li>This is the third item
     </ol>