Lists are used to store data or information in web pages in ordered or unordered form. HTML supports several types of list elements that can be included in the <BODY>tag of the document. These elements may also be nested, i.e., the onset of elements can be embedded within another. There are three types of list available in HTML:
- Unordered List
- Ordered List
- Description list
Now before moving to the list first of all we understand what is a list item tag.
List Item tag
List item tag is used to define each item of a list. Once we define list items with the <li> tag, the list appears in Web browsers in the bulleted form (by default). It is used inside both ordered and unordered lists.
Syntax:
<li> content </li>
Attribute of item tag:
value: The value attribute of the<li> tag is used to specify the value of the first item. The value must be a number and this can be used in the case of an ordered list only. The subsequent list items will increment the value from the number.
Syntax:
<li value = number>
Example 1:
<html >
<head>
<title>inline style attribute</title>
</head>
<body>
<li>sachin</li>
<li>sujay</li>
<li>Amraditya</li>
<li>shivam</li>
<li>Parth</li>
</body>
</html>
|
Output:
Example 2:
<html >
<head>
<title>inline style attribute</title>
</head>
<body>
<ol>
<li value="51">English</li>
<li>Hindi</li>
<li>Maths</li>
<li>Science</li>
<li>social science</li>
</ol>
</body>
</html>
|
Output:
Now we will discuss all the lists provided by the HTML one by one in detail:
Ordered list
An ordered list defines a list of items in which the order of the items are matters. An ordered list is also called a number list. The ordering is given by a numbering scheme, using Arabic numbers, letters, Roman numerals. Or in other words, ordered list tag is used to create an ordered list.
Different ways to number the ordered lists using the type attribute:
- type=”1″- The list items will be numbered with numbers (default)
- type=”A”- The list items will be numbered with uppercase letters
- type=”a”- The list items will be numbered with lowercase letters
- type=”I”- List items will be numbered with uppercase Roman numbers
- type=”i”- The list items will be numbered with lowercase Roman numbers
Syntax:
<ol> content </ol>
Attributes of an ordered list:
1. reversed: This attribute is used to specify that the order of the list should be reversed.
Syntax:
<ol reversed>
2. start: This attribute is used to specify the start value of the list.
Syntax:
<ol start = “number”>
3. type: This attribute is used to specify the type of list item maker. The value of this attribute is decimal(Default)/lower-roman/upper roman/lower-alpha/upper alpha
Syntax:
<ol type = “1|b|A|i|I”>
Example 1:
<html>
<head>
<title>ordered list</title>
</head>
<body>
<h1>Example of ordered list in default</h1>
<ol >
<li>Sachin</li>
<li>Manoj</li>
<li>Parth</li>
<li>sujay</li>
<li>Amraditya</li>
</ol>
</body>
</html>
|
Output:
Example 2:
<html>
<head>
<title>ordered list</title>
</head>
<body>
<h1>Example of ordered list whose type = "A"</h1>
<ol type="A">
<li>Sachin</li>
<li>Manoj</li>
</ol>
<h1>Example of reverse ordered list</h1>
<ol reversed>
<li>Parth</li>
<li>sujay</li>
</ol>
<h1>Example of ordered list start from 10</h1>
<ol start = "10">
<li>Pushpa</li>
<li>Purvi</li>
</ol>
</body>
</html>
|
Output:
Unordered list
An unordered list defines a list of items in which the order of the items does not. Or in other words, an unordered list tag is used to create an unordered list. It is also known as bulleted list. In an unordered list each element in the list is defined using <li> tag.
There are 4 types of style in unordered lists:
● type=”disc”- sets the list item marker to a bullet (default)
○ type=”circle”- sets the list item marker to a circle
■ type=”square”- sets the list item marker to a square
type=”none”- the lists items will not be marked
Syntax:
<ul> content </ul>
Attributes of an unordered list:
List-style-type: This attribute is used to specify the bullet style that will be used as the list item marker. The value of this attribute is None/disc(default)/circle/square.
Syntax:
<ul style=”list-style-type:square|disc|none;”>
Example 1:
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h1>Example of unordered list in default</h1>
<ul>
<li>Sachin</li>
<li>Manoj</li>
<li>Parth</li>
<li>sujay</li>
<li>Amraditya</li>
</ul>
</body>
</html>
|
Output:
Example 2:
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h2>Example of unordered list in circle</h2>
<ul style="list-style-type:circle;">
<li>sachin</li>
<li>manoj</li>
</ul>
<h2>Example of unordered list in disk</h2>
<ul style="list-style-type:disk;">
<li>Priya</li>
<li>Mohit</li>
</ul>
<h2>Example of unordered list in square</h2>
<ul style="list-style-type:square;">
<li>Pinky</li>
<li>Punam</li>
</ul>
<h2>Example of unordered list in none</h2>
<ul style="list-style-type:none;">
<li>Mukti</li>
<li>Dhama</li>
</ul>
</body>
</html>
|
Output:
Description list
Description list is a list in which each term contains its description. This tag contains <dt> and <dd> tag.
- <dt></dt>: This tag is used to define the name or term
- <dd><dd>: this tag is used to describe the term.
Syntax:
<dl> content </dl>
Example:
<html>
<head>
<title>Description list</title>
</head>
<body>
<h2>Example of description list</h2>
<dl>
<dt>Python:</dt>
<dd>It is a programming language</dd>
<dt>C++:</dt>
<dd>It is also a programming language</dd>
</dl>
</body>
</html>
|
Output: