Categories
HTML Tutorials

Ordered list

Ordered lists or numbered lists contain list items each prefaced by a number. We use a numbered list when the order or priority of items is important.

We use two kinds of elements for a numbered list:

  1. The ordered list element (<ol>) specifies a numbered list.
  2. List item elements (<li>) mark each item in the list.

The following markup defines a three-item numbered list:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Numbered Lists</title>
  </head>
  <body>
    <h1>Things to do today</h1>
    <ol>
      <li>Feed cat</li>
      <li>Wash car</li>
      <li>Grocery shopping</li>
    </ol>
  </body>
</html>
Things to do today
  1. Feed cat
  2. Wash car
  3. Grocery shopping

We don’t have to specify a number for each item in a list; the browser identifies list items from the markup and adds numbers, including a period after each one by default.

If you swap the first two items in the list, they’re still numbered in order when the page appears,

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Numbered Lists</title>
  </head>
  <body>
    <h1>Things to do today</h1>
    <ol>
      <li>Wash car</li>
      <li>Feed cat</li>
      <li>Grocery shopping</li>
    </ol>
  </body>
</html>
Things to do today
  1. Wash car
  2. Feed cat
  3. Grocery shopping