HTML provides three types of lists
- Ordered List
- Unordered List
- Definition List
Lets see each list one by one with suitable example.
Ordered List
This list are used to show information where order is important. for this we use ol tag.
inside <ol>..</ol> we use <li> tag.
Syntax
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>Element1</li> <li>Element2</li> <li>Element n</li> </ul> |
We can use type attribute to show list number type.
- <ol type=”1″ value=”1″> list start with number 1 and its type is numberic
- <ol type=”1″ value=”5″> list start with number 5 and its type is numberic
- <ol type=”A”> list start with capital letter A
- <ol type=”A” value=”3″> list start with capital letter C
- <ol type=”a”> list will start with small letter a
- <ol type=”I”> list will start with capital roman letter
- <ol type=”i”> list will start with small roman letter
Example:
|
1 2 3 4 5 6 7 8 9 |
<h1>Top 5 Topper of the class</h1> <ol> <li>Ram</li> <li>Mohan</li> <li>Ramesh</li> <li>Nitesh</li> <li>Nita</li> <li>Manish</li> </ol> |
Unordered List
This list are used to show information where order is not important. for this we use ul tag.
inside <ul>..</ul> we use <li> tag.
|
1 2 3 4 5 6 7 8 9 |
<ol> <li>Element1</li> <li>Element2</li> <li>Element n</li> </ol> |
You can use type attribute for showing different list market type.
like <li type=”disc”>, <li type=”circle”> or <li type=”square”>
Example:
|
1 2 3 4 5 6 7 8 9 |
<h1>List of Computer Items</h1> <ul> <li>Monitor</li> <li>CPU</li> <li>Keyboard</li> <li>Mouse</li> <li>Printer</li> <li>Projector</li> </ul> |
Definition List
To provide terms with definition we use definition list
for using definition list we use <dl>..</dl> tag.
Inside dt tag we use <dt>..</dt> for term to define
For definition(description) of term we use <dd>..</dd>
|
1 2 3 4 5 6 7 |
<h1>Definition List</h1> <dl> <dt>Keyboard</dt> <dd>An input device</dd> <dt>Monitor</dt> <dd>An output device</dd> </dl> |
We can also use nested list means list inside another list of any kind.