HTML provides a method for creating two kinds of outline-style lists. The ordered list and the unordered list. Ordered lists are used when you want to the items to appear in a particular order, like steps in a list of instructions. Unordered lists are used when the order isn't important. These appear merely as bulleted items.

Lists require two types of HTML tags. First, there is a list tag that opens and closes the entire list. These come in two varieties — for ordered lists and for unordered lists. Ordered lists use numbers or letters to denote each item. Unordered lists apply bullets to each.

In addition, however, lists also require tags (list item), which are applied to each item in the list.


Used together, they look like this:


Ordered Lists - To see how these work, we'll apply the ordered list option to the resources sections at the bottom of our webpage. Then we'll change it to an unordered list. Remember that in the last lesson, we applied anchor tags to these list items to make them hotlinks. So, when I talk about the list items, I mean both the text and its opening and closing anchor tags.

1. Put your cursor in front of the first list item (the one for HTML/XHTML) and type This command tells the browser you're starting an ordered list. The entire list will fall between this tag and its closing tag.



2. Next, insert , which stands for list item. Each entry in your list will be enclosed within list item tags. [Note: the default for ordered lists is Arabic numbers, but if you would prefer to use Roman numerals, you can change this by using the type= attribute. Available values are: A for capital letters, a for lowercase letters, I for Roman numerals, i for lowercase Roman numerals, and 1 for numbers.]



3. Move the cursor to the end of the first list item and insert the closing tag



4. Repeat steps 2 and 3 for each of the listed items, ending with the Font Frolics entry.



5. Finally, close the ordered list with the tag.

Your code should look like this:



Follow steps 1-5 to apply the same code to the other two lists at the bottom of the page, and then save and view your document. Notice that the numbering starts over with each list. If you want the second list to pick up numbering where the first one left off, you can do this by adding the start= attribute to the tag, like this:



Try it by putting start="9" in the tag for The Helpdesk. Then save your document and view it to get an idea of how the ordered list works.

Unordered Lists - Unordered lists are created in exactly the same way ordered lists are with only one difference. Instead of the tags, use (for unordered list). Try this by changing the tags in your list of links to tags. (Don't forget to remove the start="9" from the second list's tag.)

When you save and view your document, you'll see that the bullets are by default solid dots. If you want to change this, use the type= attribute. Available values are: disc (solid dot), circle (open centered dot), or square (solid box). Like this:



To see the code we've created so far, download this document: Arachne_03.htm