Learn 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 your content.

Basically, there are two types of lists that you can easily produce. 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. Not adding the numbers is important because if you decide later that you need to add a new item or remove a new item, you won't have to change all the numbers in your content.

Look at the example html file to the right. This the same html file we developed in the last tutorial but now we've added an ordered list following the first paragraph.

Look very closely at the tag set used to create the ordered list. The list of items start with an opening OL (ordered list) tag, and notice that 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 Some Basic HTML tutorial to refresh your memory.

Next, notice what happens 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 to the right, the browser will know to automatically number each item because the opening OL (ordered list) is telling it to do so. Later on we'll discuss how to format each item to make it pretty, but for now, I'm purposely keeping these tutorials very simple so that you can see that there is no 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 in a training guide where you list step1 followed by step2, followed by step3, etc. Think of an ordered list as "And" and an unordered list (usually bulleted) as "OR".

---

Practice

Now, launch your text editor and manually key in the tags exactly as shown above in the text file example. Save the file into your local web site folder and name it index.html.

Use your FTP program to upload your new html file into your hosting account. When you are ready, launch your browser and in the URL field, enter http://mysite.orangetreeweb.com, but replace "mysite" with the name of your own account that was assigned when you registered. When you visit your site, you should see your first page with the title in the title bar of your browser, the paragraph you created in the browser window, and the new ordered list that you created.

---

Comments?

Back To: How To Build A Website

Want to start a work-from-home business? Make it a Successful One!