(X)HTML Tutorial

Lists

The <ul> and <ol> elements define lists. Each list item must be enclosed in <li> tags as shown below:


   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ul>

This produces the following result:

Using <ol> will replace the bullets with numbers. Lists can be nested inside each other, as in the code below:


   <ol>
      <li>Item 1</li>
         <ol>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
         </ol>
      <li>Item 2</li>
      <li>Item 3</li>
   </ol>

This produces the result below:

  1. Item 1
    1. Subitem 1
    2. Subitem 2
  2. Item 2
  3. Item 3

Lists may be formatted using CSS to produce effects like the navigation menu for this tutorial, which is a <ul>. There is an entire science (which is part art) to styling lists for CSS. A good place to start is the well-known article Taming Lists on the web site A List Apart.