HTML List
In this article, we are going to discuss HTML List.
List
Lists are used in every web page to create navigation menus and different products in an order. There exist following three type.
- Order List
- Un-order List
- Description List
in HTML List, <li> Elements is used to define list items.
HTML List and its Type video lecture in Urdu/Hindi
HTML Order List
Elements <ol> is used to define Order List. Order list displays the items in specific order. For example the list of the subject:
- English
- Math
- Physics
- Computer
- Electronics
Oder List Styling
Order list can also be displayed with different list item maker. There are the different type of list item maker exist to use in the list. Type attribute can be specify with <ol> elements.
- 1 type = 1 : Items will be numbered with Decimal (Default).
- 2 type = a : Items will be numbered with Lower Case.
- 3 type = A : Items will be numbered with Upper Case.
- 4 type = i : Items will be numbered with Lower Case Roman.
- 5 type = I : Items will be numbered with Upper Case Roman.
Example of HTML Order List
<!--ordered list --> <ol type="i"> <li>Computer</li> <li>Physics</li> <li>Math</li> </ol>
HTML Un-Order List
Elements <ul> is used to define Un-Order List. Un-Order list displays the items without any sequence. For example the list of sports:
- Cricket
- Football
- Hockey
- Basketball
- Archery
Un-Oder List Styling
The un-order list can also be displayed with different list item maker. There are the different type of list item maker exist to use in the list. Style attribute can be specify with <ul> elements. The CSS style attribute and list-style-type property used to define different list item maker in HTML.
[table id=2 /]Example of HTML un-order List
<!--Un-ordered list--> <ul style="list-style-type:none"> <li>Cricket</li> <li>Football</li> <li>Hockey</li> </ul>
HTML Description List
HTML Elements <dl> is used to define description list. Elements <dt> is used to define Description Title. <dd> elements is used to define description data.
 <!-- Description List --> <dl> <dt>Computer</dt> <dd>First Description Data are to be listed here</dd> <dt>Computer</dt> <dd>Second Description Data are to be listed here</dd> <dt>Computer</dt> <dd>Third Description Data are to be listed here</dd> </dl>
Example program of HTML List
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!--Un-ordered list--> <ul style="list-style-type:none"> <li>Cricket</li> <li>Football</li> <li>Hockey</li> </ul> <!--ordered list --> <ol type="i"> <li>Computer</li> <li>Physics</li> <li>Math</li> </ol> <!-- Description List --> <dl> <dt>Computer</dt> <dd>First Description Data are to be listed here</dd> <dt>Computer</dt> <dd>Second Description Data are to be listed here</dd> <dt>Computer</dt> <dd>Third Description Data are to be listed here</dd> </dl> </body> </html>
I hope this article is really helpful. You can also learn about CSS3, Bootstrap4, PHP7, and HTML. If you have any queries, please discuss in the comment section. This is really helpful to improve performance. Thank You.
