In this article, you will learn about HTML list, how to create lists in html, various html list tags and also learn about the implementation of different types of HTML lists styles (ordered html List, unordered html list, html description lists etc.) with the help of examples.
HTML lists
HTML list allows us to write a group of related items or piece of information in sequence. HTML list provide us a way to present the data in the form of a list and these lists specify lists of information.
Now let's understand html list with the help of following example:
<!DOCTYPE html><html>
<body>
<h2>List of fruit names</h2>
<ul>
<li>Mango</li>
<li>Apple</li>
<li>Grapes</li>
</ul>
<h2>List of vegetable names</h2>
<ol>
<li>Lady Finger</li>
<li>Capsicum</li>
<li>Potato</li>
</ol>
</body>
</html>
Output
Now, you must be thinking that why do we need to use lists in html? - Well the answers is simple by using these method we can easily group a set of related items on a html document or in web pages.
Types of list in HTML
There are three different types of html lists :
• Unordered html list
• Ordered html list
• Html description list
In the following, we have discussed all the three types of html lists one by one in detail;
HTML Unordered List
The HTML <ul> tag is used to specify the unordered list on an HTML document or webpage. In unordered html list, all the list items are marked with bullets. Each list items start with <li> tag.
Syntax:
<ul> list of items </ul>
Now let's understand unordered html list with the help of following example:
<!DOCTYPE html><html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
Output
We can specify the type of bullet of our choice by using the type attribute inside the html <ul> tag. By default it is a disc.
In the following, we have mentioned all posible options:
<ul type = "square">
<ul type = "circle">
<ul type = "disc">
Illustration no. 1: In this example we have used <ul type="square"> to specify a list items in new bulleted type i.e., marked with squares.
<!DOCTYPE html><html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
Output
Illustration no. 2: In this example we have used <ul type = "circle"> to specify a list items in new bulleted type i.e., marked with circle.
<!DOCTYPE html><html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
Output
Illustration no. 3: In the following example we have used <ul type = "disc"> to specify list items in marked with bullets.
<!DOCTYPE html><html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
Output
Illustration no. 4: In the following example we have used <ul type = "none"> to specify list items without any marked.
<!DOCTYPE html><html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="none">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
Output
HTML Ordered List
The HTML <ol> tag is used to specify the ordered list on an HTML document or webpage. In ordered html list, all the list items are marked with numbers by default. Each list items start with <li> tag.
Syntax:
<ol> list of items </ol>
Now let's understand ordered html list with the help of following example:
<!DOCTYPE html><html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ol>
</body>
</html>
Output
We can specify the type of numbering of our choice by using the type attribute inside the html <ol> tag. By default it is a number.
In the following, we have mentioned all posible options:
<ol type = "1">
<ol type = "I">
<ol type = "i">
<ol type = "A">
<ol type = "a">
Illustration no. 1: In this example we have used <ol type = "1">
<!DOCTYPE html><html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="1">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ol>
</body>
</html>
Output
Illustration no. 2: In this example we have used <ol type = "I">
<!DOCTYPE html><html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ol>
</body>
</html>
Output
Illustration no. 3: In this example we have used <ol type = "i">
<!DOCTYPE html><html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ol>
</body>
</html>
Output
Illustration no. 4: In this example we have used <ol type = "A">
<!DOCTYPE html><html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ol>
</body>
</html>
Output
Illustration no. 5: In this example we have used <ol type = "a">
<!DOCTYPE html><html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ol>
</body>
</html>
Output
HTML Description List
The html <dl> tag is used to specify a description list on an html document or webpage. A description list is similar to other lists but in a description list, each list item contains two entries; a term/name that is defined by <dt> tag and a description of each term/name defined by <dd> tag.
Syntax:
<dl> Contents... </dl>
In the following example, we have used <dl> tag to defines a description list:
<!DOCTYPE html><html>
<head>
<title>HTML Description List</title>
</head>
<body>
<dl>
<dt><b>WWW</b></dt>
<dd>This stands for World Wide Web</dd>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
</dl>
</body>
</html>
Output
HTML List Tags
In the following table we have mentioned basic html list tags:
| S.No | Tags | Description |
|---|---|---|
| 1. | <ul> | It defines an unordered list. |
| 2. |
<ol> | It defines an ordered list. |
| 3. | <li> | It defines a list item. |
| 4. | <dl> | It defines a description list. |
| 5. | <dt> | It defines a term in a description list. |
| 6. | <dd> | It describes the term in a description list. |
Conclusion
Above we have discussed about HTML list, how to create lists in html, various html list tags and also learn about the implementation of different types of HTML lists styles (ordered html List, unordered html list, html description lists etc.) with the help of examples. HTML list allows us to write a group of related items or piece of information in sequence. HTML list provide us a way to present the data in the form of a list and these lists specify lists of information.