HTML5 tutorial - The ol and ul list tags.

The ol and ul list tags

There are three types of lists. The first two are bulleted and numbered lists. Needless to say, those on high who name such things couldn't simply call them "Bulleted" or "Numbered", but "Unordered" and "Ordered". Whatever – I guess it could be worse.

UL – Unordered lists:

Example:

  • Apples
  • Oranges
  • Bananas

UL Code:
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

OL – Ordered Lists:

Example:

  1. Breakfast
  2. Lunch
  3. Dinner

OL Code:
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

Lists can be "nested" or put inside one another.

  • Fruit
    • Oranges
    • Bananas
  • Vegetables:
    1. Peas
    2. Corn

Be careful to close tags in the reverse order they were opened, and with lists it can get confusing. The trick is to indent your code. Take a look at this page's source code and you will see what I mean.