Lists

Summary

Use ul and ol tags to make lists.

Situation

You want to make a list.

Action

Use ul and ol tags to make lists. They are both containers, with li tags inside them.

ul makes bulleted lists. The u stands for unordered. E.g.:

  • <ul>
  •   <li>An item</li>
  •   <li>Another item</li>
  •   <li>Yet another item</li>
  • </ul>

It looks like:

  • An item
  • Another item
  • Yet another item

ol makes a list with numbers.

  • <ol>
  •   <li>An item</li>
  •   <li>Another item</li>
  •   <li>Yet another item</li>
  • </ol>

It looks like this:

  1. An item
  2. Another item
  3. Yet another item

You can nest lists:

  • <ul>
  •   <li>19th century
  •     <ul>
  •       <li>1836: Eunice (mastiff) crowned Bitch of New South Wales.</li>
  •       <li>1840:
  •         <ol>
  •           <li>Isaac (lab) eats 15 pounds of figs at Moreton Bay.</li>
  •           <li>Thark (sheltie) barks for 17 hours nonstop. Riots in Port Jackson.</li>
  •         </ol>
  •       </li>
  •       <li>1895: Booblo (Welsh terrier) marks Barton as a future PM.</li>
  •     </ul>
  •   </li>
  •   <li>20th century
  •     <ul>
  •       <li>1915: Groft (border collie) rescues sausages under fire.</li>
  •       <li>1967: Lilabeth (Portuguese water dog) directs shark to prime ministerial snack.</li>
  •       <li>1975:
  •         <ol>
  •           <li>Goofer (collie) bites PM.</li>
  •           <li>Goofer (collie) bites PM again.</li>
  •           <li>Kerr (govenor general) bites PM.</li>
  •           <li>Goofer (collie) becomes PM.</li>
  •         </ol>
  •       </li>
  •     </ul>
  •   </li>
  • </ul>

Here's how it renders:

  • 19th century
    • 1836: Eunice (mastiff) crowned Bitch of New South Wales.
    • 1840:
      1. Isaac (lab) eats 15 pounds of figs at Moreton Bay.
      2. Thark (sheltie) barks for 17 hours nonstop. Riots in Port Jackson.
    • 1895: Booblo (Welsh terrier) marks Barton as a future PM.
  • 20th century
    • 1915: Groft (border collie) rescues sausages under fire.
    • 1967: Lilabeth (Portuguese water dog) directs shark to prime ministerial snack.
    • 1975:
      1. Goofer (collie) bites PM.
      2. Goofer (collie) bites PM again.
      3. Kerr (govenor general) bites PM.
      4. Goofer (collie) becomes PM.
Where referenced
Lists