HTML Lists

March 09, 2008

HTML lists are a fairly simple yet powerful way of structuring bits of information that belong together. We'll have a look at the 2 most common lists: unordered list and ordered list. There's also a third list type called definition list which isn't used all that much, so we'll skip it for now.

Unordered lists

You can think of the unordered list as your typical shopping list where you have a collection of items that have no special order. The <ul>...</ul> tags mark the beginning and end of the list with <li>...</li> elements inside being the list items. By default the list style is vertical with bullets.

HTML unordered list:

  • <ul>
  •   <li>bananas</li>
  •   <li>orange juice</li>
  •   <li>big family pizza with extra cheese</li>
  • </ul>

Display:

  • bananas
  • orange juice
  • big family pizza with extra cheese

Ordered lists

Ordered lists are numbered lists where the sequence matters. A top 10 list or a list of instructions are good examples. The HTML code is like the unordered list except for the enclosing tags <ol>...</ol>. By default the list style is vertical with Arabic numerals.

HTML ordered list:

  • <ol>
  •   <li>Have your boiling and salted water ready (with 1-2 tablespoons of olive oil if you like).</li>
  •   <li>Add pasta and cook it for about 7 to 10 minutes (try the pasta as it cooks to see how you like it best).</li>
  •   <li>Enjoy!</li>
  • </ol>

Display:

  1. Have your boiling and salted water ready (with 1-2 tablespoons of olive oil if you like).
  2. Add pasta and cook it for about 7 to 10 minutes (try the pasta as it cooks to see how you like it best).
  3. Enjoy!