My Hobbies markup

home > web design > web

Nested lists

The following table shows a numbered list, nested inside a bulleted list. The first cell displays the markup text and the second cell shows how this will display in a browser.

A nested list is indented within a list item of a higher-level list. Notice that an ordered list can nest inside an unordered list and vice versa. Also (and this is important for SA#1), the ENTIRE nested list must exist within the single list item that precedes it.

<h2>My Hobbies</h2>
 <ul>
  <li>books
   <ol>
    <li>mysteries</li>
    <li>romances</li>
    <li>comedies</li>
   </ol>
  </li><!--Note this is the closing tag for the "books" list item-->
 <li>movies</li>
 <li>cities</li>
 </ul>

My Hobbies

  • books
    1. mysteries
    2. romances
    3. comedies
  • movies
  • cities