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 <ul type = 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 <UL type = 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 <ul type = square> <li> impact printers <ul type = circle> or <ul> <li> dot matrix <li> chain printer <li> drum printer <li> ink jet printer </ul> <li>non-impact printers <ul type = 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.
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular