How to Create HTML Unordered 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 -- you do not have to add the bullet. Not adding the bullet 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 anything in your content.
<html>
<head>
<title>
This is the title of my document
</title>
</head>
<body>
<p>This is the first paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
Look very closely at the tag set used above to create the unordered list. The list of items starts with an opening UL (unordered list) tag, and notice that the list is closed off with the closing UL (unordered 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 what happens between the opening UL tag and the closing UL tag. Each bulleted 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 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 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 a text editor and manually key in the tags exactly as shown above in the code example. Save the file into your local web site folder and name it index.
Open your browser an 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. Launch your browser and in the URL field, enter the address of the new page. When you visit the page, 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.