How to Create Numbered Lists in HTML5

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>
<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>

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.

image0.jpg

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.

image1.jpg
    <ol>
      <li>Wash car</li>
      <li>Feed cat</li>
      <li>Grocery shopping</li>
    </ol>
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com