HTML coding – HTML Lists

HTML coding – HTML Lists cover image
  1. Home
  2. HTML
  3. 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:

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:

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.

HTML