HTML coding - HTML Lists

We all understand the importance of lists in everyday life. They are an indispensable tool for cataloging and indexing various objects and events. Two kinds of lists are very common and used by us regularly. The Ordered Lists help us keep an organized inventory wherein the list items are ranked while in Unordered lists, the classification is not important and the list items do not occur in any assorted order.

HTML provides us with 5 different kinds of lists out of which 3 are routinely used. These lists are block-formatting elements that define a block structure and help in a logical layout of the document. The five lists are:

• <OL> - </OL>: Ordered List
• <UL> - </UL>: Unordered List
• <DL> - </DL>: Definition List
• <MENU> - </MENU>: Menu List (sparsely used)
• <DIR> - </DIR>: Directory List (sparsely use)

ORDERED LIST
If the ranking of items is desired, we employ ordered lists. To place individual list items, you use the <LI> tag as

<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three
<LI>Item Four
</OL>

The code above is displayed by the browser as

1. Item One
2. Item Two
3. Item Three
4. Item Four

You would have noticed that the list items show some indentation on the left and some space is inserted before and after the list. This makes the reading of the list easy and helps it to stand out from the other text. An ending tag for a list item </LI> is not required.

Numbers are the default bullets in ordered lists but you can change this using the TYPE attribute of <OL> tag. This attribute takes one of the five values:

• TYPE="a": Lowercase alphabet
• TYPE="A": Uppercase Alphabet
• TYPE="i": Lowercase Roman Numerals
• TYPE="I": Uppercase Roman Numerals
• TYPE="1": Regular number (default)

Thus,

<OL TYPE="A">
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>

is displayed as

1. Item One
2. Item Two
3. Item Three

Another attribute is COMPACT (without any value) but is generally ignored by the browsers.

UNORDERED LIST
<UL> - </UL> are the starting and ending tags of Unordered lists. List items are included using the <LI> tag.
Unordered lists also support the TYPE attribute that takes disc, circle or square as its value.

<UL>
<LI>Item One
<LI>Item Two
<LI>Item Three
<LI>Item Four
</UL>

is displayed as

• Item One
• Item Two
• Item Three
• Item Four

Using TYPE="square" on the list above will result in

• Item One
• Item Two
• Item Three
• Item Four

DEFINITION LISTS
These lists are great for making glossaries. As you know, a glossary consists of a term and a definition. For HTML Definition lists, which are enclosed between <DL> and </DL>, you have to use <DT> to indicate the Term and <DD> to denote the definition.

<DL>
<DT>webdevelopersnotes.com
<DD>A great place to learn web development.
<DT>fontmagic.com
<DD>One of the largest font sites on the Internet.
</DL>

will be shown by the browser as:

webdevelopersnotes.com

A great place to learn web developement.

fontmagic.com

One of the largest font sites on the Internet.

Note that the definitions are indented.

Since <MENU> and <DIR> are seldom used and not well supported by browsers, I shall not be discussing them.

Now play with the code:
To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.