WebDevelopersNotes logo

home-icon Home / HTML / HTML coding – HTML Lists

HTML coding – HTML Lists

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)

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>
<LI>Item Two</LI>
<LI>Item Three</LI>
<LI>Item Four</LI>
</OL>

HTML 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.

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>
<LI>Item Two</LI>
<LI>Item Three</LI>
</OL>

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>
<LI>Item Two</LI>
<LI>Item Three</LI>
<LI>Item Four
</UL></LI>

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>

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.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sometimes i just need a break

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

Do you stay away from new technology? Do you prefer the "old ways"? You suffer from Technophobia! [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy