list tag in html
There may come a time when you would like to add a list to a web page, HTML supports several ways of arranging items in lists. The most commonly used are:
♦ Ordered List (commonly known as numbered list)
♦ Unordered List (commonly known as bulleted list)
Each HTML list has the following structure:
<list_tag>
<item_tag> Item text </item_tag>
<item_tag> Item text </item_tag>
...
...
</list_tag>
Ordered List <OL>
Typically ordered list is rendered by numbering scheme using Arabic numbers, letters or Roman numbers. Ordered list are suitable for crating simple outlines because the list items are automatically numbered by the browser. Ordered list also called as Numbered list, is used to present a numbered list of item starting with “1”unless changing the <OL> tag type. An ordered list must begin with the <OL> followed by an <LI> list item tag.
Example: An HTML document orderedList.html shows the use of Ordered List:
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
<H1><U> An Order List </U></H1>
<OL>
<LI> Item 1
<LI> Item 2
<LI> Item 3
<LI> Item 4
</OL>
</BODY>
</HTML>
After saving the page display it in browser.
Attributes of <OL> Tag
The <OL> tag has three basic attributes and these are compact, start and type.
TYPE: Type attributes is used to specify numbers or letters. By default the list Item markers are set to numbers 1, 2, 3… so on. Other values of TYPE attribute are:
Type = A Capital letter eg. A, B, C, D………
Type = a Small letter eg. a, b, c, d ………
Type = I Uppercase Roman Numbers eg. I, II, III, IV……
Type = i Lowercase Roman Numbers eg. i, ii, iii, iv……
Type = 1 eg. 1, 2, 3, 4………….
START: Start attribute is used to begin a list at point other than 1. The start value must be a number. For example if you want to start a list at the number 10, you might write it as follows:
The Type attribute can appear within the <OL> tag or it can appear within each <LI>< OL type =1 start=10>.
Example: An HTML document ordered listtype.html shows the use of Ordered List using type:
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
<H1><U> An Order List using type </U></H1>
<OL type= a >
<LI> Item 1
<LI> Item 2
<LI> Item 3
<LI> Item 4
</OL>
</BODY>
</HTML>
Nested Order List
One ordered list might contain one or more ordered list that is called as Nested Order lists.
Example: An HTML document nested.html shows the use of Nested Order Lists with attributes.
<HTML>
<HEAD>
<TITLE> Example Nested Ordered Lists</TITLE>
</HEAD>
<BODY>
<OL TYPE = A >
<LI> Programming Language
<OL TYPE = I>
<LI> COBOL
<LI> C
<LI> Java
<LI> C++
</OL>
<LI> Operating Systems
<OL TYPE = i>
<LI> Windows
<LI> Linux
<LI> Unix
</OL>
</OL>
</BODY>
</HTML>
Unordered List <UL>
Unordered List also called as bulleted list, used to present list of items marked with bullets. An unordered list starts with in <UL> followed by <LI> (List Item) tag to delimit each individual list item. Use of <UL> is very similar to <OL> (ordered list).
The following is an example of Unordered List and Various Attributes:
<HTML>
<HEAD>
<TITLE> Use of Unordered List </TITLE>
</HEAD>
<BODY>
<UL>
<LI> FRUITS
<UL>
<LI> Apple
<LI> Orange
<LI> Mango
</UL>
<LI> VEGETABLE
<UL>
<LI> Brinjal
<LI> Potato
<LI> Tomato
</UL>
</UL>
</BODY>
</HTML>
When you display the page in a browser it will produce like the following figure which Displaying Unordered Lists in browser.
No paragraph separator (or anything else) is necessary at the end of a list item; the subsequent <li> tag (or list end tag) serves that role. (One can also have a number of paragraphs, each itself containing nested lists, in a single list item, and so on.)
Unordered lists also support the list-style-type property, but with slightly different values:
✦ Disc
✦ Circle
✦ Square
✦ None
The unordered list also used the attributes TYPE= CIRCLE or DISC (filled Circle used as a bullet)
0 মন্তব্য(গুলি):
একটি মন্তব্য পোস্ট করুন
Comment below if you have any questions