HTML & CSS tutorials
7. Nested lists

Note: While reading this page, bear in mind that although I have some experience of writing HTML and CSS I'm no expert. If you find errors or have proposals for improvements, please send me a message and help make this a better page for the benefit of future visitors. If you're new to or not that experienced in HTML and CSS, I suggest you go to the Introduction page and follow the instructions. To the left, there are links to more HTML and CSS tutorials.


Want to make nested lists alias putting lists in li tags? Here's how:

<ul>
 <li>Things I like
  <ul>
   <li>Fascinating places</li>
   <li>Fat food</li>
   <li>Free computer programs</li>
  </ul>
 </li>
</ul>

You can even add more levels to nested lists. Here's how to make a list with three levels:

<ul>
 <li>Things I like
  <ul>
   <li>Fascinating places
    <ul>
     <li>Hasankeyf</li>
     <li>Sainshand</li>
     <li>Skagen</li>
    </ul>
   </li>
   <li>Fat food
    <ul>
     <li>Chips</li>
     <li>Pastries</li>
     <li>Thin pancakes</li>
    </ul>
   </li>
   <li>Free computer programs
    <ul>
     <li>FastStone Capture</li>
     <li>FileZilla</li>
     <li>Notepad++</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

Would you like to comment on this page or some other page? Use the contact form. Write the title of the page you want to comment on and your comment in the field Message.