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:

3. I'm the first element of the ordered list
4. I'm the second element of the ordered list
5. I'm the third element of the ordered list
6. 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.

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.

Target Attribute of Anchor Element

Target Attribute:

Target Attribute is used to specify whether the linked webpage/document/file will be:

• opened in the current tab of the browser.
• opened in the new tab, next to the current tab, of the browser.
• opened in the new window (not in new tab).

An example of the target attribute is given as following which covers all the three possible states.

Exemplary Code:

&ltb&gt<a href="url of directed webpage or web site">Hello! I'm testing the Hyper Link tag of HTML. </a></b>
                

Example Result:

Hey click me! I will open in a new tab.
Hey click me! I will open in the current tab.
Hey click me! I will open in a new window.