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 <ol type= 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.
<html>
<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)
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 <ol type=a> <li> impact printers <ol type=1> <li>character printers <ol type=i> <li> dot matrix <li> ink jet printer <li> letter quality </ol> <li>line printers <ol type=i> <li>chain printers <li>drum printers </ol> </ol> <li>non-impact printers <ol type= a> <li> laser printer <li> electrostatic printer <li> wax printer <li> ink jet printer </ol> </ol> </body> </html>
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular