Free Template Designs - Free Webmaster Tutorials: Using Ordered and Unordered Lists

Using Ordered and Unordered Lists

Have you ever wondered how to create lists? Or perhaps, how to make a numbered list verses a bulleted list? Heres a quick tutorial to explain. Bulleted lists, or unnumbered lists, are created using <ul>. Here is an example:

One
Two
Three

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The <li> is found around each element of the list regardless of type. For example, if we wanted to create a numbered list, which uses <ol>, we would still use the <li>'s as you can see here:

One
Two
Three

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

Now lets say you wanted a nested loop. The effect is achieved as you were most likely thinking:

One:
- Sub One
- Sub Two
- Sub Three
Two:
- Sub One
- Sub Two

<ul>
  <li>One:
    <ul>
      <li>Sub One</li>
      <li>Sub Two</li>
      <li>Sub Three</li>
    </ul>
  </li>
  <li>Two:
    <ul>
      <li>Sub One</li>
      <li>Sub Two</li>
    </ul>
  </li>
</ul>

All you have to do is add a new list in each <li> to create the nested loop. Its as simple as that!