Free Hosting > Support > Using Unordered and Ordered Lists
Using Unordered and Ordered Lists in HTML
Lists are one of the most popular devices used by authors of HTML web pages to display content. This is due, in large part, to the way lists organize data in a crisp and easy to digest visual order.
HTML provides code for two different types of lists. The first of these is an ordered list. I've shown you the code for a three item ordered list in the textarea below.
An Explanation of the HTML
Placement : Ordered lists may be placed anywhere between the body tags of an HTML document. The code should be placed exactly where you'd like the list to appear.
The Format : Ordered lists begin with a < followed by an ol (easy to remember, the first letter of each word in ordered list), and a >. This first command tells your visitors' computers to expect an ordered list. You then do another <, the letters li (for list item) and a >. Type the data for your first list item. The command tells the computer that what follows your LI command was the first list item. Repeat the list item steps until you've completed your list. Then close the ordered list with the /ol (in <>) to let the computer know your list has been completed. List items do not require an end or closing tag.
The Ordered List Tags : Lets take a look at what the code presented in the above text area would look like on the page.
- FlashWebHost.com
- BizHat.com
- HostOnNet.com
- FreeMarriage.com
The above list could be titled Zombie movies written and directed by George A. Romero. Notice how the code for an ordered list automatically numbers each list entry. Also, each list item is given its own line, without having to add a break or hard return tag.
Sometimes webmasters may wish to present lists of data without numbering each item. Since the ordered list tags automatically generate numbers for each item another type of code must be used. This code is known as the unordered list. I've shown you a list of such items in the textarea below.
An Explanation of the HTML
Placement : Unordered list placement follows all of the same rules as those presented above for an ordered list.
Format : The format for unordered lists is the same as that of ordered lists (detailed in the previous section of this tutorial), except that ul (for unordered list) is used in place of ol in both the list begin and end tags.
The Unordered List Tags : Lets look at what the code from the textarea above would look like on a web page. I've included the code below.
- FlashWebHost.com
- BizHat.com
- HostOnNet.com
- FreeMarriage.com
The ONLY difference between unordered and ordered lists visually is that unordered lists generate bullets for each list item, rather than numbers.
|