Tuesday 31 December 2013

Ordered List

Lists

HTML provides us three different types of lists which are given as follows:

  1. Ordered List
  2. Unordered List
  3. Definition List

Ordered List:

<ol> tag is used to start an ordered list.

List Item Element <li></li> is used to insert a an item in the list.

There are three types of ordered list.

  1. Numbered List
  2. Alphabetic List
  3. Roman Number List

Important Attributes of <ol> tag:

type: determines the type of the list whether it would be a numbered list, alphabetic list or roman numbers list.

start: determine the starting number for the list whether an alphabetic list should start from the 'a' or from 'd' or form any other alphabet.

Possible values of both the attributes are given in the following table.

Value of type attribute Value of startattribute
1 Positive integer
a Positive integer
A Positive integer
i Positive integer
I Positive integer

 

Example of Ordered List with Numbers:

Exemplary Code:
<ol>
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ol>
Example Result:
  1. I'm the first element of the ordered list
  2. I'm the second element of the ordered list
  3. I'm the third element of the ordered list
  4. I'm the fourth element of the ordered list

In the above example we are using an ordered list. We have not defined its type and the starting value as by default it's type is '1' and started from '1'. It increases automatically by 1.

Example of Ordered List with Alphabets:

Exemplary Code:
<ol type="a">
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ol>
Example Result:
  1. I'm the first element of the ordered list
  2. I'm the second element of the ordered list
  3. I'm the third element of the ordered list
  4. I'm the fourth element of the ordered list

In the above example we are using an ordered list of type 'a'. We have not defines its starting value as By default it starts from '1'. It also increases automatically by 1.

Exemplary Code:
<ol type="i"start="3">
    <li>I'm the first element of the ordered list</li>
    <li>I'm the second element of the ordered list</li>                  
    <li>I'm the third element of the ordered list</li>
    <li>I'm the fourth element of the ordered list</li>
</ol>
Example Result:
  1. I'm the first element of the ordered list
  2. I'm the second element of the ordered list
  3. I'm the third element of the ordered list
  4. I'm the fourth element of the ordered list

In the above example we are using an ordered list of type 'i' starting from '3'. It also increases automatically by 1.

You can try other remaining types of the ordered list.

No comments :

Post a Comment