What's an Ordered List and why use it?
At some point in your coding careers you may have to present your viewers with a List of things. The Ordered List allows you to build and maintain large numbered lists of whatever it is you need to list on your page. (For example, a Top 100 sites list)
Recently I got a letter from a visitor asking why she should bother
using an ordered list when all she really had to do was type the numbered
list in herself. Well... yes, you can do it that way, but using an
Ordered List will save you a lot of time in the long run.
Let's take the following list as an example:
Top Ten States <br>
<p>
1. Hawaii <br>
2. Wisconsin <br>
3. Texas <br>
4. California <br>
5. Montana <br>
6. Idaho <br>
7. Washington <br>
8. Wyoming <br>
9. Oklahoma <br>
10. Arizona <br>
Ok, there is my list as coded on my web page. Simple enough to do...
although entering all those line break's ( <BR> ) is a royal pain.
Now, let's say I have suddenly discovered that I am missing a State in my
list. Let's say I need to insert Alabama as the number 3 state.
I have to insert a new entry PLUS renumber ALL of the entries below it.
This is highly annoying and this particular list only has 10 entries.
Imagine, if you will, a list that had 100 entries! Think of the work!
Just as we created the Unordered List with two separate tags, we have to
use two tags to create an Ordered List. We start with the Opening Ordered
list tag:
<OL>
Then we need to enter the individual items for the list. We use the <LI> List Item tag to define individual items in the list:
<LI> Hawaii
<LI> Wisconsin
<LI> Texas
<LI> California
<LI> Montana
<LI> Idaho
<LI> Washington
<LI> Wyoming
<LI> Oklahoma
<LI> Arizona
Using the Item List tag will give you a fully numbered list, and it
requires no line breaks to tell it where to end the line. When your
browser reads the next <LI> tag it assumes that it is a new item and
displays it on the next line without a line break needed.
Now imagine I have to enter Alabama as the 3rd State... all I have to do
is insert "<LI> Alabama" in the correct place and the coding will renumber
the entire list for me!
Now of course we have to close the List with the correct closing tag:
</OL>
Here is the completed list:
<OL>
<LI> Hawaii
<LI> Wisconsin
<LI> Alabama
<LI> Texas
<LI> California
<LI> Montana
<LI> Idaho
<LI> Washington
<LI> Wyoming
<LI> Oklahoma
<LI> Arizona
</OL>
Try this on your own web page and see what happens when you insert a new
list item into an existing Ordered list!
TIPS TO REMEMBER:
There is no limit to the amount of List Items <LI> that you can put into
one <OL> Ordered List.
The <OL> Ordered List tag will automatically indent the items you specify
with the <LI> List Item tag,so you won't have to code in spaces as well.
The <OL> tag MUST have the Closing </OL> tag, to complete the list
properly.
