Types of list -HTML

Whats is List ?

With the help of list, group of items will be displayed in the form of list. It is used to present list of information in a well manner. Important information can be displayed briefly in the form of list.

Types of list:

1. Orderd List (ol)
2. Unordered List (ul)
3. Nested/Multilevel List
4. Definition List

1.Ordered List (ol): Ordered List will use a different style of number to list your items.List can be numerical or alphabet.

To provide a style to list use “type” attribute and then will give a value in this “type” attribute.When you create a list you need to use a <li> (List item) tag., in this tag put your content, without list item tag content will not visible.

Example:

<ol type="I">
<li>Tea</li>
</ol>

In the place of “I” yon also give another values here like:a,A,I,i,1.

a: lower case letter
A: Upper case letter
I: Upper case numerals
i: lower case numerals
1: Default case numerals

Output : 

2.Unordered List (ul): Unordered List will use a bullets to decorate your item list. This List will marked with Bullets.

Example:

<ul type="Square">
<li>Tea</li>
</ul>

In the place of “Square” yon also give another values here like: disc, circle, square, none.

disc: it is default bullet.
circle: List item will marked as a empty circle.
square: List item will marked as a square.
none: In which there is a no bullets style in the list.

Output :

3.Multilevel / Nested List: It create a list inside an another list. it will create a list with the combination of ol(ordered list), ul(unordered list).You can also assign a different type styles with it.

Example:

<ul type="square">
<li>Red</li>
<li>Green
<ol type="I">
<li>Tea</li>
<li>Coffee</li>
<li>Juice</li>
</ol>
</li>
<li>Yellow</li>
</ul>

Output :

4.Definition list(dl): In which entire list is listed as a dictionary or encyclopedia. Definition list is a best way to present a glossary, list of term etc. In which uses an another tag like:dt(Definition term), dd(definition description).

Example:

<dl> 
<dt>Nurse</dt> 
<dd>A person who care for us.</dd> 
</dl> 
<dl>
<dt>Education</dt> 
<dd>Without education life is nothing.</dd> 
</dl>

Output: