Creating numbered lists

Numbered lists are also known as ordered lists. To start a number list, use the <ol> tag. The ol in <ol> stands for ordered list. To indicate the ending of a list, use </ol>. Now, you know how to mark the beginning and end of your list.

Next, piece of information that is needed to create a list is the items you want to list. For indicating items of your list, use the <li> tag for each item. Do not forget to indicate the ending of each items of your list by using the </li> tag.

See table 1 for summary of the tags used in creating an ordered list.

Table 1 list of tags required for creating an ordered (numbered) list
Tag Purpose
<ol> Specifies start of an ordered list
</ol> Marks the end of an ordered list
<li> Specifies list item
</li> Marks the end of list item

As you may realize from this discussion, these same tags are used in HTML to create an ordered list. However, there is one notable difference:

  • In HTML, you don't have to close the listing tag. Your list will show properly in a browser.
  • In XHTML, however, any open tag must be closed (following this sequence: closing first the last tag that was opened) for the document to be valid.

We will create the following list, as an example:

  1. Computers
  2. Software
  3. Hardware

Because each list item has a number in front, we know it is a numbered list. To create this list, we need to use the <ol> tag. Follow these steps to create this list:

Steps/Explanation   XHTML Markup
  1. Start the list with <ol> tag
<ol>
  1. Mark the end of list with </ol> tag
</ol>
  1. Enclose each list item between <li> and </li>.
<li>Computers</li>
<li>Software</li>
<li>Hardware</li>
  1. Between the start and end tag insert the markup for each list item.
<ol>
<li>Computers</li>
<li>Software</li>
<li>Hardware</li>
</ol>

In this example, we started with the <ol< tag to start an ordered list. For the first item that we want to list, we enclose it inside the <li> and </li>, as <li>Computers</li>. Similarly, the second and third items are surrounded by an opening and closing listing item tag. To mark the end of the numbered list, we use the Computers </ol> tag. By default, a numbered list appears with Arabic numerals, i.e., 1, 2, 3, and so on.