Learn Ordered Lists

Learning how and when to use unordered 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 unordered lists. Unordered lists are tagged such that the browser automatically bullets each item. Not manually adding the bullets 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 waste time inserting bullets into 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 unordered list following the first paragraph.

Look very closely at the tag set used to create the unordered list. The list of items start with an opening UL (unordered list) tag, and notice that the list is closed off with the closing UL (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 UL tag and the closing UL tag. Each numbered item is tagged with the opening LI (list item) tag and closed off using the closing LI (list item) tag, exactly like it was done in the Learn Ordered Lists tutorial.

When the browser is reading the html file to the right, the browser will know to automatically bullet each item because the opening UL (unordered 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 Unordered Lists

The use of unordered lists and ordered 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 unordered 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!