Lists on the Web pages
This topic quite important because as I work on front-end from my graduation. Mostly I used this tag for creating nav, listing the items as well as the side-bar navigation, etc.
List on a web page like telling the content on points either its Numeric list or Bulletin list.
In HTML, Lists are categories into 3:-
-
Ordered List
This is a type of list in which content is pointed through numbers, roman numbers, or alphabetic.OL tag is used for the ordered list and for each item of the lists we use LI tags.
-
Un-ordered List
This is another kind of list in which content is pointed through the disc, bulletin, etc. UL tag is used for the un-ordered list and for each item of the list we use LI tags.
-
Data Definition List
This is a special kind of list. Its usage is very less. But when anyone needs to define data into the list formation this list helps you in that. In this list, we use 3 tags i.e. DL, DT, DD tags. DL stands for Data List. this tag help to telling to browser data definition list will start from now. Between DL tag, DT and DD tag used. DT tag stands for Data Type. Its name suggests us it is used for the data type of the list. DD tags stand for Data Definition. It helps to define the Data Type into the list.
Few examples would help you to understand the difference between these lists.
- Note: In Ordered List and Un-Ordered List we have an attribute i.e type. type attribute using for changing the way of listing bulletin point into number, alphabet, or bulletin.
Ordered Lists
|
1. For Number List
<!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> <OL type='1'> <LI>Beetroot</LI> <LI>Ginger</LI> <LI>Potato</LI> <LI>Radish</LI> </OL> </BODY> </HTML>
|
2. For Alphabetic List
<!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> <OL type='A'> <!-- also we able to use a -- > <LI>Beetroot</LI> <LI>Ginger</LI> <LI>Potato</LI> <LI>Radish</LI> </OL> </BODY> </HTML>
|
3. For Roman Number List
<!DOCTYPE html> <HTML> <HEAD> </HEAD> <BODY> <OL type='I'> <!-- also we able to use i -- > <LI>Beetroot</LI> <LI>Ginger</LI> <LI>Potato</LI> <LI>Radish</LI> </OL> </BODY> </HTML>
|
Un-Ordered List
1. For Disc List <!DOCTYPE HTML> <HTML> <HEAD> </HEAD> <BODY> <UL type='disc'> <LI>Beetroot</LI> <LI>Ginger</LI> <LI>Potato</LI> <LI>Radish</LI> </UL> </BODY> </HTML>
|
<!DOCTYPE HTML> <HTML> <HEAD> </HEAD> <BODY> <UL type='circle'> <LI>Beetroot</LI> <LI>Ginger</LI> <LI>Potato</LI> <LI>Radish</LI> </UL> </BODY> </HTML>
| 3. For Square List <!DOCTYPE HTML> <HTML> <HEAD> </HEAD> <BODY> <UL type='square'> <LI>Beetroot</LI> <LI>Ginger</LI> <LI>Potato</LI> <LI>Radish</LI> </UL> </BODY> </HTML>
|
We you have any doubt let me know :)