Ryan's District Boards

Computer, programming, and webmaster help , support , tips and tricks => Tutorials Zone! => Internet webmaster computer programming technology tips and tricks => HTML Tutorials => Topic started by: ben2ong2 on October 03, 2006, 06:01:13 PM

Title: HTML coding - HTML Lists
Post by: ben2ong2 on October 03, 2006, 06:01:13 PM
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

Item One
Item Two
Item Three
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

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