HTML Lists
In this tutorial, we will learn about lists and its types in HTML with the help of examples.
Lists
To represent data in the form of list we have three types of lists that can be used in HTML.
Types of lists that can be used in HTML are:
- Unordered list
- Ordered list
- Description list
Note : All lists must contain one or more list elements.
Unordered List
- An unordered list starts with the <ul> tag in HTML document.
- Each list item is known as lists and starts with the <li> tag.
- The list items will be marked with bullets (small dots) by default.
- The type attribute is used to specify the type of bullets(square, disc, circle).
Types of Unordered List
| Type | Description |
|---|---|
| disc | List items marked to a disc (default) |
| circle | List items marked to a circle |
| square | List items marked to a square |
| none | List items will not be marked |
Example :
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h2>Grocery Items</h2>
<ul>
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<ul type = "square">
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<ul type = "circle">
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<ul type = "none">
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ul>
</body>
</html>Output
Grocery Items
- Butter
- Bread
- Milk
- Tea
- Butter
- Bread
- Milk
- Tea
- Butter
- Bread
- Milk
- Tea
- Butter
- Bread
- Milk
- Tea
Ordered List
- An ordered list starts with the <ol> tag in HTML document.
- Each list item is known as lists and starts with the <li> tag.
- The list items will be marked with numbers from 1 by default.
- The type attribute is used to specify the type of numerals.
Types of Ordered List
| Type | Description |
|---|---|
| 1 | List items will be numbered with numbers (default) |
| A | List items will be numbered with Uppercase Letters |
| a | List items will be numbered with Lowercase Letters |
| I | List items will be numbered with Uppercase roman numbers |
| i | List items will be numbered with Lowercase roman numbers |
Example :
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h2>Grocery Items</h2>
<ol>
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ol>
<ol type = "A">
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ol>
<ol type = "a">
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ol>
<ol type = "I">
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ol>
<ol type = "i">
<li>Butter</li>
<li>Bread</li>
<li>Milk</li>
<li>Tea</li>
</ol>
</body>
</html>Output
Grocery Items
- Butter
- Bread
- Milk
- Tea
- Butter
- Bread
- Milk
- Tea
- Butter
- Bread
- Milk
- Tea
- Butter
- Bread
- Milk
- Tea
- Butter
- Bread
- Milk
- Tea
Description List
- An description list starts with the <dl> tag in HTML document.
- A description list is a list of terms, with a description of each term.
- This list arranges items in the same way as they are arranged in a dictionary.
- The <dl> tag defines the description list, the <dt> tag defines the term(name) and the <dd> tag describe each term.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Description List</title>
</head>
<body>
<h2>Grocery Items</h2>
<dl>
<dt>HTML</dt>
<dd>HTML stands for Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheet</dd>
</dl>
</body>
</html>Output
Grocery Items
- HTML
- HTML stands for Hyper Text Markup Language
- CSS
- CSS stands for Cascading Style Sheet
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Lists in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Tables.