Tuesday 31 December 2013

Unordered List

Unordered List:

<ul> tag is used to start an unordered list.
List Item Element <li></li> is used to insert a an item in the list.
There are three types of unordered list:
  1. Disc List
  2. Circle List
  3. Square List

Important Attributes of <ul> tag:

type: determines the type of the list whether it would be a circle list, disc list or square list.
Possible values of the type attribute are given in the following table.
Value of type attribute
Disc
Circle
Square

Example of Unordered List of Type Disc:

Exemplary Code:
<ul>
    <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>
</ul>
Example Result:
  • I'm the first element of the ordered list
  • I'm the second element of the ordered list
  • I'm the third element of the ordered list
  • I'm the fourth element of the ordered list

In the above example we are using an unordered list. We have not defined its type as by default it's type is 'disc'.

Example of Unordered List of Type Circle:

Exemplary Code:
<ul type="circle">
    <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>
</ul>
Example Result:
  • I'm the first element of the ordered list
  • I'm the second element of the ordered list
  • I'm the third element of the ordered list
  • I'm the fourth element of the ordered list

In the above example we are using an unordered list of type 'circle'.

Example of Unordered List of Type Square:

Exemplary Code:
<ul type="square">
    <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>
</ul>
Example Result:
  • I'm the first element of the ordered list
  • I'm the second element of the ordered list
  • I'm the third element of the ordered list
  • 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