HTML list...
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)
HTML 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)
<OL TYPE="A">
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>
Is displayed as
A. Item One
B. Item Two
C. Item Three
Another attribute is COMPACT (without any value) but is generally ignored by the browsers.
HTML 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
HTML Definition List
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 development.
fontmagic.com
One of the largest font sites on the Internet.
Note that the definitions are indented.