Lists are powerful tools to group similar elements, and lists give visitors to your site an easy way to zoom in on groups of information. Just about anything fits in a list, from sets of instructions to collections of links. A numbered list consists of at least two items, each prefaced by a number. Use a numbered list when the order or priority of items is important.

You use two kinds of elements for a numbered list:

  • The ordered list element (<ol>) specifies a numbered list.

  • List item elements (<li>) mark each item in the list.

A numbered list with three items requires elements and content in the following order:

  1. <ol>

  2. <li>

  3. Content for the first list item

  4. </li>

  5. <li>

  6. Content for the second list item

  7. </li>

  8. <li>

  9. Content for the third list item

  10. </li>

  11. </ol>

The following markup defines a three-item numbered list:

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Numbered Lists</title>
    <h1>Things to do today</h1>
      <li>Feed cat</li>
      <li>Wash car</li>
      <li>Grocery shopping</li>

This figure shows how a browser renders this markup. You 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, as shown in this figure.

      <li>Wash car</li>
      <li>Feed cat</li>
      <li>Grocery shopping</li>