Now day’s lists are omnipresent. Whenever one jots down the items to be bought from a grocery store, one goes through the telephone directory to look for a particular phone number or looks up at the table of contents of a book, or is taking the help of lists to make his task easier. In fact, lists are the best method of organizing information and presenting it in a structured fashion.
There are 3 kinds of lists:
(1) Ordered lists (Numbered lists)
(2) Unordered lists (Bulleted lists)
(3) Definition lists
Ordered Lists: <OL> ...............</OL>An ordered list is one that is numbered and may also be used to indicate sequential form of information. <OL> and </OL> are opening and closing tags for an ordered list respectively. The code used for ordering the List as below:
<html>
<head>
<title>ordered list without numbers</title></head>
<body>
software testing methods
<ol> black box testing
white box testing
control structure testing
</ol>
</body>
</html>
We observe from above code that text is indented during the actual printing of the list. However, the listed items have not been printed on separate lines. HTML does not recognize line breaks, unless it is told by using <P> or <BR> tags. The list item tag <LI> is used to remove this problem. It can be noticed in the code as shown below:
<html>
<head><title>ordered list with numbers</title></head>
<body>
software testing methods
<ol>
<li> black box testing
<li> white box testing
<li> control structure testing
</ol>
</body>
</html>
When the browser encounters the tag <LI> for each item, it starts a new line, indents and adds a number. Thus we get the output as seen in the above figure1.15. Ordering is typically rendered by a numbering scheme, using Arabic numbers, letters or Roman numerals.
By default numbered lists use Arabic numerals (1, 2, 3, 4). So by writing <OL type = a> instead of just <OL> we have overridden the default & created a numbered list which uses alphabets for numbering. The code shows the OL listing as:
<html>
<head><title>ordered list with numbers</title></head>
<body> software testing methods
<oltype= a>
<li> black box testing
<li> white box testing
<li> control structure testing
</ol>
</body>
</html>
The values & Styles for the type attribute are given below:
Value Style Example
1 (default) Arabic 1, 2, 3, 4, ….
a Lower case alpha a, b, c, d, ….
A Uppercase alpha A, B, C, D….
I Uppercase Roman I, II, III, …..
i Lower case Roman i, ii, iii,…….
The start attribute: This attribute is used to override default list numbering when a list is divided into multiple parts. The use of start attribute can be shown in the code as.
<htm>
<head><title>ordered list with numbers</title></head>
<body>
impact printers
<ol>
<li> dot matrix
<li> chain printer
<li> drum printer
<li> ink jet printer
</ol>
<p>non-impact printers
</p>
<olstart=5>
<li> laser printer
<li> electrostatic printer
<li> wax printer
</ol>
</body>
</html>
The use of <OL start = 5> instead of <OL> makes the browser understand that the numbering of the second list is to start from 5 & not 1 (The default value)
We’ll be covering the following topics in this tutorial:
Nested Lists
A nested list is a list within a list that can extend up to several levels. One of the most common places where we can see a nested list is in the contents of a book. To create a nested list a new set of ordered list tags is to be included within the current list tags. The code shows the insertion of a new list within the original list i.e. (nested list).
<html>
<head><title>nested list </title></head>
<body> type of printers
<oltype=a>
<li> impact printers
<oltype=1>
<li>character printers
<oltype=i>
<li> dot matrix
<l1> ink jet printer
<l1> letter quality
</ol> <li>line printers
<oltype=i>
<li>chain printers
<li>drum printers
</ol> </ol>
<li>non-impact printers
<oltype= a>
<li> laser printer
<li> electrostatic printer
<li> wax printer
<li> ink jet printer
</ol> </ol>
</body>
</html>
Unordered list : <UL >………… </UL>
Unordered lists are used to represent a set of items that have a relation among themselves but do not follow a specific order. The syntax is same as that of ordered list, only <OL> and </OL> tags are replaced by <UL> and </UL>. In an ordered list items of the lists are numbered (1,2,3,4…; a,b,c,d or I,II, III, IV….) but in an unordered list the items are presented using bullets. The code for an unordered list is given as:
<html>
<head><title>unordered list </title></head>
<body>
software testing methods
<ultype= a>
<li> black box testing
<li> white box testing
<li> control structure testing
</ul>
</body>
</html>
You will realize that an unordered list is represented in the similar way as ordered list, the only difference being that bullets (i.e. A dot or other symbol placed before text, such as items in a list, to add emphasis.) are used instead of numbers to represent each item.
The type attribute
The actual appearance of bullets may vary from browser to browser. Does that mean the choice of the type of bullets is completely with the browser and the user has no control over it? Of course not. HTML does offer additional choices for the bullet appearance using the type attribute.
Syntax
<ULtype= type_of_bullet >
type_of_bullet: It takes anyone of the values: circle, square or disc.
Let us write down the HTML document that uses different types of bullets. The code shows how nesting can be done in unordered lists. Note that we can have an ordered list as the list item for an unordered list and vice versa. Also nesting can be done to any number of levels.
<html>
<head><title>unordered list </title></head>
<body> type of printers
<ultype= square>
<li> impact printers
<ultype= circle> or<ul>
<li> dot matrix
<li> chain printer
<l1> drum printer
<li> ink jet printer </ul>
<li>non-impact printers
<ultype= disc>
<li> laser printer
<li> electrostatic printer
<li> wax printer </ul>
</ul>
</body>
</html>
The above example is also that of a nested list. Some browsers may automatically select a different bullet style for each nested layer. However, if you want to get a particular effect, you will have to specify the style explicitly by using the type attribute.
Definition List: < DL>………….. </DL>
A definition list is a list of terms paired with associated definitions – in other words, a glossary. Definition list (which cannot in the strictest sense be called a list) is used to provide two levels of information.
This type of listing is usually found in dictionaries, in glossary of terms at the end of a book and in Frequently Asked Questions Pages. Because definition lists don’t add numbering or bullets, many HTML writers have used this element to indent text. Just as we had used <OL> and <UL> tags for ordered and unordered lists respectively, similarly we use <DL> tag for definition list.
The two levels of information, namely the term and the definition are done with the <DT> and <DD> tags. <DL> tag makes the browser understand that we are dealing with a definition list. <DT> tag defines the term of the definition list and the <DD> tag defines the definition.
<html>
<head><title>definition </title></head>
<body> glossary
<dl>
<dt><b> templates</b>
<DD>A template determines the basic structure for a document and contains document settings such as AutoText entries, fonts, key assignments, macros, menus, page layout, special formatting, and styles. <DT><B>WIZARD</B>
<DD>A feature that asks questions and then creates an item, such as a form or web page, according to your answers.
</dl>
</body>
</html>
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular