How to Create HTML Ordered Lists
Learning how and when to use ordered lists is essential to writing good copy that can be easily understood by both humans that read your content and search engines that index it. Basically, there are two types of lists that you can easily create using a simple text editor: ordered lists and unordered lists. This tutorial will focus specifically on ordered lists.
Ordered lists are tagged such that the browser automatically numbers each item -- you do not have to add the numbers into the content because the numbering is automatically done by the browser displaying the ordered list. Not adding the numbers into the content is important because if you decide later that you need to add a new item or remove an existing item, you won't have to change all the numbers in your content.
<html>
<head>
<title>
This is the title of my document
</title>
</head>
<body>
<p>This is the first paragraph.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</body>
</html>
Look very closely at the tag set used above to create the ordered list. The list of items starts with an opening OL (ordered list) tag, and the list is closed off with the closing OL (ordered list) tag. How do you distinquish between the opening and closing tags? The closing tag carries the "forward slash" in the tag to tell the browser that the element is being closed. If you have forgotten that point, please go back to the Learn Basic HTML tutorial for a refresher on basic HTML.
Next, notice the tags that occur between the opening OL tag and the closing OL tag. Each numbered item is tagged with the opening LI (list item) tag and closed off using the closing LI (list item) tag. When the browser is reading the HTML file, it will know to automatically number each item because the opening OL (ordered list) is telling it to do so. Later, I'll describe how to format each item to make it pretty, but for now, I'm purposely keeping these tutorials simple so that anyone can see that there is no real magic involved.
Proper Use of Ordered Lists
The use of ordered lists and unordered lists are not interchangable. You do not use an ordered list for listing items that can occur in any order. The proper use of an ordered list dictates that each item should occur in the order as given, such as you would expect to see in a training guide where you list step1 followed by step 2, followed by step 3, etc. Using an ordered list implies that first you complete step 1, then you complete step 2, then step 3. Think of an ordered list as "AND" and an unordered list (usually bulleted) as "OR".
Practice
You can practice coding the HTML using a simple text editor and a browser. Launch a text editor and manually key in the tags exactly as shown above in the code example. Save the file on your desktop or somewhere you'll be able to find it later with a filename of index.html or index.htm.
Open a browser and use the File->Open command to navigate to the page on your local PC to test that the content displays properly.
When you want to make the page accessible to the public, use your FTP program to upload your new HTML file into your hosting account.
When you are ready to test the page, launch your browser, and in the URL field, enter the address of the new page. As an example, if I uploaded my new page into a test folder on my hosting accout, I could access the page through a browser by entering something like "http://www.mysite.com/test/index.html". You should see your test page with the browser TITLE in the title bar of your browser, the paragraph you created in the browser window, and the new ordered list that you created.