In this post we are going to learn How to add a list in HTML, List plays a significant role in our daily life. For example, a To-do list helps us determine our daily tasks and so on. HTML has various list elements that help us to insert different types of lists in an HTML Document.
HTML provides three different types of lists, to be used in a web page.
1. Unordered List
2. Ordered List
3. Description List
Let us learn about them one-by-one.
Unordered List
An unorderd list is bassically a bullted list of items that does nt follow a specific sequence. <ul> and </ul> tags are used to create an unordered list. <li> tag is used inside <ul> and </ul> tags to specific a list items. it is an empty tag.
Example:
<UL>
<LI> Pens
<LI> Caryons
<LI> Notebooks
<LI> Drawing Books
<LI> Marker Pens
</UL>
Type Attribute
The type attribute specifies a bullet to be used in an unordered list, to mark the list items. It can have the following values:
1. TYPE = "Square": It inserts a solid black square bullet.
2. TYPE = "Circle": It inserts a circular bullet.
3. TYPE = "Fill round": It inserts solid black circular bullets.
Example:
<UL TYPE="square">
<LI> Pens
<LI> Caryons
<LI> Notebooks
<LI> Drawing Books
<LI> Marker Pens
</UL>
Ordered List
An ordered list is basically a numbered list of items that follows a specific sequence. <ol> and </ol> tags are used to create an unordered list. <li> tag is used inside <ol> and </ol> tags to specific a listed item. It is an empty tag.
Example:
<OL>
<LI> Pens
<LI> Caryons
<LI> Notebooks
<LI> Drawing Books
<LI> Marker Pens
</OL>
Let us learn about different types of attributes that can be used with an ordered list.
Type Attribute
The type attribute is used to specify the type of numbered list. The order to the list items can be specified using various options:
1. TYPE = A: It will give a list A, B, C, D, ......................
2. TYPE = a: It will give a list a, b, c, d ............................
3. TYPE = 1: It will give a list like 1,2,3,4,.......................
4. TYPE = I: It will give a list like I, II, III, IV, ..................
5. TYPE = i: It will give a list like i, ii, iii, iv, .........................
Examples:
<OL YTYPE=A>
<LI> Pens
<LI> Caryons
<LI> Notebooks
<LI> Drawing Books
<LI> Marker Pens
</OL>
Start Attribute
The start attribute defines the number from which an ordered list should star. By default, the ordered list starts from 1. However, there may be cases where a list starts from another. You can use this attribute to specify a different starting order other than the first number or alphabets such as 1, A, and a.
<OL TYPE = "1" start = "5"> Numbers start with 5.
<OL TYPE = "I" start = "5"> Numbers start with V.
<OL TYPE = "i" start = "5"> Numbers start with v.
<OL TYPE = "a" start = "5"> Numbers start with e.
<OL TYPE = "A" start = "5"> Numbers start with E.
Example:
<OL TYPE = "1" Start = "5">
<UL TYPE="square">
<LI> Pens
<LI> Caryons
<LI> Notebooks
<LI> Drawing Books
<LI> Marker Pens
</OL>
Description List
A description list gives a brief description of the list items. It is used to list multiple terms and their description. <dl> and </dl> tags are used to create a description list. Instead of having a <li> tag to specify list items, the description list uses the following tags.
1. <dt> Description term tag defines a term/name in a description list.
2. <dd> Description tag describes a term/name in a description list.
Example:
<DL>
<DT> Keyboard </DT>
<DD> An input device</DD>
<DT> Pen drive</DT>
<DD> A storage device</DD>
<DT> Monitor</DT>
<DD> An output device</DD>
</DL>
Nested List
You can place one list include another and thus can create a nested list. When you use an ordered list inside an unordered list and vise versa, you are using a nested list. Let us learn to prepare a nested list in the HTML.
Example:
<OL>
<LI>Complete the homework.</LI>
<LI>Pack the bag.</LI>
<LI>Go to the stationery shop and buy:
<UL>
<LI>4 Notebooks
<LI>3 Drawing Books
<LI>5 Marker pens
</UL>
</OL>
We will again meet in another post. Stay Safe, Keep Learning, Keep Growing.