Learn to build ordered lists with the <ol> and <li> tags, then customize numbering with the type attribute (letters, Roman numerals) or the reversed attribute for descending order. The presenter shows a working example of top five cities and explains why CSS, not HTML, should handle styling.
This video will show you how to set up an ordered list in your HTML document. First off, what the heck's an ordered list? An ordered list is a list of items with a definite order, like Dave's top 10, or the 5 tallest buildings in the world, or as I'm about to demonstrate, the top 5 cities I've lived in. Now let's go ahead and create our ordered list. Now I've got my title right here, and underneath that I'm going to go ahead and open up our ordered list with the ordered list opening tag, and that's the opening bracket, OL, then the closing bracket. And I'm going to go ahead and add the closing ordered list as well. It's the same as the opening ordered list, only it begins with the forward slash, just like that. I'm going to put the cursor in there, hit my Enter key a couple of times, and give me some room to work. Now inside of the ordered list opening and closing tag, you have to have the list items, and they also have an opening and closing tag, and they look like this. As a little pop-up box shows, it's the li, which should be easy to remember— list item. Like I said, each of those have their opening and closing tag. Now let's go ahead and enter the top 5 cities that I've lived in. And that's our ordered list. Let me go ahead and back this guy up a little bit. Let's go ahead and save this. Now as you can see, with an ordered list, the list is presented to you in an ordered fashion. And in this example, numbered. You can also have it set up to where they are delivered to you with Roman numerals or with letters, with uppercase or lowercase. And with HTML5, there's a new attribute that you can use to reverse the order. Let me show you. Now this is brand new to HTML5, so it may not be supported in all browsers. As a matter of fact, I think it may only be supported in 2 of them right now. But let's just take a look-see. And frankly, it's a better idea to have all styling done in your CSS and not inline or in your HTML coding. But that's just my 2 cents worth. Save this and see. Yep. Okay, so it works. Now another styling you can put in here is instead of having it going numbers lowest to the highest, or is in this case highest to the lowest, you can put in the type equals attribute and put in an uppercase A or a lowercase a to have the results shown in uppercase letters or lowercase letters. Uppercase A. Save. And we will put this in a lowercase a. Save. There you go. Now then, the other one that I know of is Roman numerals. Likewise, uppercase or lowercase. That's the uppercase I for the Roman numerals in uppercase, lowercase i for the lowercase Roman numerals. And again, I want to mention just in closing here that all these stylings that I've been pointing out here should in fact be done in the CSS and not here within the HTML code. But I did want to point out that you will see this done from time to time, but I would suggest doing it in the CSS even though it does work just fine within the HTML. And that's going to bring to a close this video on ordered lists in your HTML web page. Thanks for watching and you have a great day.
