Ordered lists are very similar to unordered list.
So much so in fact, that they share almost exactly the same syntax.
So to demonstrate that, I've opened up the ordered.htm found in the 06_02 directory,
and it probably looks like to some of you, that I just left the old exercise file
that we were working on, on the last exercise open.
Because it is exactly the same, for the most part.
The heading changed, but we still have that same unordered list, and
we still have that same nested one.
And indeed, if we preview that in the browser.
You can see we get an unordered list which is represented by those bullets for
both the top level and the nested level list.
So we want to change that to an ordered list.
And the only thing that you need to do,
syntax wise, to do that is change the parent tag.
So the list items remain the same, I just take the ul and I change it to an ol.
That is easy enough isn't it?
So if I save that and previewed it.
There we go.
So now our top level list is an ordered list.
One, two, three, four.
And the nested list is an unordered list, and that's fine.
There is nothing wrong with nesting and
combining ordered and unordered lists in any way that you want.
It does not matter.
Now, we do have a little bit more control over ordered lists in terms of
the things that we can do with it, than we can un-ordered list.
Really, with an un-ordered list all your going to be controlling is whether it
has a bullet or not, or whether that bullet is a square or a disk.
Ordered lists on the other hand,
they of course have a distinct sequence to each of the items in the list, and
we have a little bit of control over how that sequence is represented.
So I'm going to go back into my HTML, and I'm going to
convert the nested list to the ordered list as well so we can control it.
Save that.
And then, for the parent order list one of the things that we can do,
is we can change when the count of a certain list starts.
So for example I can come in and
say start=, and then we just pass a value into it, and let's say 6.
So I'm going to start that count at six.
So saving that, going back out of the browser you can
see now that list is going six, seven, eight and nine.
Now we can also do some really interesting, like reverse it.
So we can do reversed, which is a boolean attribute.
So we're just going to say, ol start="6" and then space and reversed.
So notice that we have to have that space between those attributes.
So if I hit save and
go back over here you can see that now it's counting down from six.
Six, five, four, three.
Now for the nested list let's play around with the type.
The default type in most browsers is going to be the arabic numerals one,
two, three, four, five, six, seven.
But you can kind of play around with that a little bit as well.
So if I say type=, I have some choices here.
And I can do lowercase i, if I do that, I get lowercase roman numerals.
I can do an uppercase I.
If I do that I get uppercase roman numerals.
I could also do the number 1, which is the default.
So if I say that, I can see I go back to doing arabic numerals.
And then I have alphabet.
So if I do a capital A, save that, I get A, B, C.
And of course if I do lowercase A, I get lower case letters.
And I'm just going to leave it as that.
So those are some of the options that we have.
We can start numbering it at any number we want.
We can reverse the sequence, and we can also choose what type of list we want to
have in terms of how we want those numbers to display.
So, so that's a few more options when deciding how to render them over
unordered lists, but for the most part the syntax is just as straight forward.
Now, since CSS allows us to visually format lists, really,
any way we choose, when choosing between an ordered and
an unordered list, your primary deciding factor should be the semantics of it.
And that is, does the sequence of these items matter.
If the sequence does matter and ordered list would be the proper choice.