An ordered list provides a list of items that should be viewed and/or performed in a certain order.
In a college or university setting, you might be given a series of classes that are recommended to take in a given order due to prerequisites. Or you might have a list of steps needed to perform an algorithm. Performing them out of order would cause the algorithm to break.
The ordered list has been a part of HTML as long as the unordered list, and is built in a similar way. The exception being that instead of a <ul> tag, you use a <ol> tag.
The ordered list by default displays a series of decimal numbers. However, using CSS you can use letters, or upper or lowercase roman numerals.
To build the list, you will use the <ol> tag set, and list each step in the list using the <li> tag. The <li> tag works exactly as it did in the unordered list.
<ol>
<li>Select a pivot value for your list.</li>
<li>Divide the unsorted list into sublists, of less than, equal to, or greater than your pivot list.</li>
<li>Recursively break the list down into smaller lists, until you have only a single set of elements.</li>
<li>Take adjacent pairs of two singleton lists and merge them to form a list of 2 elements.</li>
<li>Repeat the process until a single sorted list is obtained.</li>
</ol>Just as there is no way to caption an unordered list, there is no way to caption the ordered list. So web developers will sometimes use a heading tag to caption the text above the list. You can see this was done with an <h3> heading tag in this example.
Properties for an Ordered List
Unlike with an unordered list, there are a couple of useful HTML properties that are available to web developers when working with an ordered list. The reversed property can be set if you want to list your items in descending order. Think of it like a Top Ten Countdown list.
<ol reversed>
<!-- list of items -->
</ol>The second property that is important, is the start property. This property takes a number, and specifies the starting place for your numbers to start. Let’s take an example, of where you are listing some steps, and then you need to break into some detailed information. Then, you need to pick up your steps where you left off, you could provide a start value to allow you to do this.
<ol start=”5”>
<!-- list of items -->
</ol>Styling an Ordered List
As you can see from the sample image, sometimes people will want to adjust the CSS for the <li> tag to make the text a little more readable.
If your site is using both ordered and unordered lists, you can control the <li> tag separately if you want. To do so, you will need to use multiple items in your selector, as shown below:
li {
/* rules specific for all li tags */
}
ul li {
/* rules specific for li tags that are within an unordered list */
}
ol li {
/* rules specific for li tags that are within an ordered list */
}The other thing you generally will style with your ordered list, is to change the numbers into a different type. You will use the list-style-type property to change the list type, just like with the unordered list, however, you will use decimal (default), upper-alpha, lower-alpha, upper-roman, or lower-roman as your values.
ol {
list-style-type: lower-alpha
}Ordered List in a Webpage was originally found on Access 2 Learn
